反应状态管理

Question

我对React非常陌生。 在阅读React教程时，我了解了将状态提升到父组件的必要性，以确保子组件可以保持同步并馈送驻留在父组件状态的主要数据块。 但是，随着数据的更改，父级中的setState不会触发所有子级组件的重新渲染，从而降低UI性能吗？ 不使用flux或redux，在react应用程序中定位状态的最佳方法是什么？

Answer 1

是的，您基本上是正确的。 但是您不需要将组件的状态传递给子组件，您只传递props ，而实际上并不相同，因为更改props不需要重新渲染组件。

在组件生命周期中，有一个了不起的方法，称为shouldComponentUpdate ，如果只有状态对象的浅等式为假（如果引用不同，这就是为什么状态突变不会重新呈现组件），则默认返回true。 您还可以自己实现此方法，比较道具以检查是否需要更新。 有一个计划如何运作。

而且，如果虚拟DOM未被更改，则react不会重新呈现元素。 因此，如果仅更改了他的道具，则可以重新渲染组件，但是如果需要更改其子代的道具，则必须重新渲染current 。

基本上，由于这些原因，建议将应用程序的状态从顶部拉到叶子组件（返回大多数html）。 您可以在此处阅读有关优化的更多信息 。

---

而且必须说：

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

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

Answer 2

当您更改组件的状态时，它将触发该组件的重新渲染。

重新渲染将创建一组新的虚拟元素（从render函数返回），React用来表示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 3

如果仅在寻找状态管理库，请检查Duix（ https://www.npmjs.com/package/duix ）。

Redux解决了很多问题（增加了复杂性）。 如果您只想改善状态管理，请看看Duix。

PS .：我创建了那个库