所有者/父母与所有者/个人子女的 setState答案

【问题标题】：setState on owner/parent vs ownee/individual children所有者/父母与所有者/个人子女的 setState
【发布时间】：2015-01-16 14:23:43
【问题描述】：

我有以下视图层次结构，

<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});
   }

【问题讨论】：

a) 可能更好。状态应该尽可能靠近根，并且尽可能少的组件应该有状态。

标签： javascript reactjs

【解决方案1】：

正如 Felix 在 React 中提到的那样，您应该始终尝试为您的状态所在的位置找到“共同所有者”。理想情况下，您应该在层次结构中拥有尽可能高的任何状态，因为这允许数据通过道具沿单一方向向下传递。

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

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

这样做的目的是让您的Order 组件在理论上更加"pure"（尽管目前反应“纯”只处理浅道具）。它只是简单地给出了一些数据（通过道具）并呈现自己。 IE。它不需要担心什么时候更新，它更类似于一个简单的模板，并且可以更容易地在它应该更新时进行优化（当 props 不同时）

【讨论】：