javascript - 所有者/父级与所有者/单个子级的 setState

Question

我有以下 View 层次结构，

<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) OrderList 下订单的所有更新均由 OrderList 组件中的函数处理

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):Thinking in React

因此，在您的具体示例中，您的 OrderList 组件将包含您的订单列表 - (您选择的选项 a)。然后，当您收到更新 1 个或多个订单的事件时，您只需修改 OrderList 上的状态即可触发更新，将新数据传递到您的 Order ，这也会触发更新更新并重新渲染。

这样做的作用是让您的 Order 组件更加丰富 "pure"理论上(尽管“纯” react 目前仅处理浅层 Prop )。它只是被给予一些数据(通过 props)并渲染自身。 IE。它不需要担心何时更新，它更类似于一个简单的模板，并且可以在实际需要更新时(当 props 不同时)更轻松地进行优化