反应状态管理

Question

我对此反应很新。在阅读React教程时，我理解了将状态提升到父组件的必要性，这可以确保子组件可以保持同步，并且可以以驻留在父组件状态中的主要数据块为基础。但是，随着数据的变化，父组件中的setState不会触发所有子组件的重新呈现，从而降低UI性能吗？在不使用通量或还原的情况下，哪种方法是在一个反应应用程序中定位状态的最佳方法？

Answer 1

当您更改组件的状态时，它会触发该组件的重呈现。

重呈现将创建一组新的虚拟元素(从render函数返回)，这些元素用于表示DOM的新状态。但是，除非虚拟DOM与实际DOM之间存在差异，否则不会发生任何更改。

React的虚拟元素只是实际HTML元素的轻量级对象表示，这使得在大多数情况下，您甚至不需要考虑为子组件调用render的性能成本。

但是，如果您确实发现自己有一个具有特别昂贵的呈现功能的子组件，则可以防止它始终由shouldComponentUpdate重新呈现。这允许您使用细粒度控件进行指定，而在道具或状态中的更改实际上将触发要更新的组件。

另一种方法是构建一个自定义状态管理解决方案，它显式地将您的组件连接在一起。

let state = { count: 0 };
let listenForState = null;

function ComponentA() {
  let onClick = () => {
    state.count += 1;
    if (listenForState) listenForState(state);
  };

  return <button onClick={onClick}>+</button>;
}

class ComponentB extends React.Component {
  constructor() {
    super();
    this.state = state;
  }
  componentWillMount() {
    listenForState(state => this.setState(state));
  }
  render() {
    return <span>{this.state.count}</span>;
  }
}

然而，这很快就失控了，而且没有比将状态提升到共享父级更好的情况了。

如果您发现状态驱动的子组件在有状态父组件中嵌套得太深，那么现在是时候看看Redux了。

Answer 2

是的，你主要是对的。但是您不需要将组件的状态传递给子组件，而是只传递道具，这实际上是不一样的，因为更改道具不需要重新修改组件。

组件生命周期中有一种很棒的方法，称为shouldComponentUpdate，如果只有较浅的状态相等对象是假的(如果引用不同--这就是为什么状态的变异不会重新生成组件)，则默认返回它为true。你也可以自己实现这个方法，比较你的道具来检查你是否需要更新。有一个计划，它将如何运作。

​

​

而且，如果虚拟DOM未被更改，react将不会重新添加元素。因此，如果只更改了的道具，但如果您需要更改其子程序的道具，则可以重新复制组件--您必须重新复制当前的。

简单地说，由于这些原因，有一个建议将应用程序的状态从顶部提取到leafs组件(它返回大部分html)。您可以阅读更多关于优化的这里。

必须说：

您的代码必须成为意大利面

如果您有很多组件，这些组件有很多事件，基于状态，那么如果您需要一些复杂的体系结构，可以使用剩馀或其他全局状态管理器。

Answer 3

如果您只查找状态管理库的，请选中Duix (https://www.npmjs.com/package/duix)。

Redux解决了许多问题(增加了复杂性)。如果您只想改进国家管理，只需看看Duix。

PS.：我创建了那个图书馆。