Question

我有以下视图Hierarchy，

<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

正如菲利克斯在React中所提到的那样，你应该总是试着找到你所在州应该居住的“共同所有者”。理想情况下，您应该在层次结构中具有尽可能高的状态，因为这允许数据通过道具向下传递。

React有一个很好的页面，希望能为您澄清这一点（具体请看第4步）：Thinking in React

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

这样做可以使你的Order组件在理论上更加"pure"（虽然“纯粹”反应仅涉及浅层道具）。只需给出一些数据（通过道具）并渲染自己。 IE浏览器。它不需要担心什么时候更新，它更像是一个简单的模板，它可以更容易地优化什么时候它实际上应该打扰更新（当道具不同时）

所有者/父母与ownee /个别子女的setState

1 个答案: