设置所有者/父母与拥有者/个人子女的状态

Question

>我有以下视图层次结构，

<Container>
 <OrderList data="orders" >
  <Order data={orders[0]} />
  <Order data={orders[1]} />
  <Order data={orders[2]} />
  ...
 </OrderList>
 <OrderList data="orders" >
  <Order data={orders[0]} />
  <Order data={orders[1]} />
  <Order data={orders[2]} />
  ...
 </OrderList>
 ....
</Container>

单个订单的更新通过推送器进行。

我是 React 的新手，想知道以下哪项是更新已挂载组件的好方法

a） 订单列表下订单的所有更新都由订单列表组件中的函数处理

function handleChange(order_index, updated_order){
  var orders = _.clone(this.state.orders);
  orders[order_index] = updated_order
  this.setState(orders);
}

V/S

b） 订单的更新由订单组件中的函数处理

function handleChange(updated_order){
      this.setState({order: updated_order});
   }

Answer 1

正如 Felix 在 React 中提到的，你应该始终尝试找到你的州应该居住的"共同所有者"。理想情况下，您应该在层次结构中具有尽可能高的任何状态，因为这允许数据通过 props 沿单个方向向下传递。

React

对此有一个很棒的页面，希望能为您澄清这一点（特别是看看第 4 步）： 在 React 中思考

因此，在您的特定示例中，您的OrderList组件将包含您的订单列表 - （您选择的选项 a）。然后，当您获得更新 1 个或多个订单的事件时，您只需修改OrderList上的状态即可触发更新，将新数据向下传递给您的Order， 也会更新并重新呈现。

这样做是使您的Order组件在理论上更加"纯净"（尽管反应"纯净"目前只处理浅层道具）。它只是被赋予一些数据（通过道具）并渲染自己。即。它不需要担心何时更新，它更类似于一个简单的模板，并且可以更轻松地优化何时真正需要更新（当道具不同时）