如果 props 和 state 没有改变，为什么 React 组件会更新

Question

当 React 组件的 state 或 propr 保持不变时，它正在渲染。 我不明白为什么它会重新渲染/更新，因为结果不会改变

class A extends Component {
  render() {
    console.log("Hello")
    return "Foo";
  }
}
class App extends Component {
  constructor(props) {
    super(props);

    this.state = { a: "ASDA" };
  }

  render() {
    return (
      <div>
        <button onClick={()=>this.setState({a: Math.random()}) }>asdsa</button>
        <div>{this.state.a}</div>
        <A />
      </div>
    );
  }

每当我单击按钮时，组件 A 都会重新渲染（我可以在控制台中看到“hello”）我认为 React 避免了许多无用的重新渲染。

Answer 1

您的父组件正在重新渲染，因为它的状态发生了变化。

当一个组件重新渲染时，它的所有子组件都会重新渲染。 这意味着渲染函数会运行，并将结果添加到虚拟 DOM 中。

然后将此结果与现有 DOM 进行比较。 这并不意味着子组件的实际 DOM 发生了变化，只是因为 DOM可能需要更改而重新评估它们。

如果结果证明子元素确实需要更改，则重新渲染实际 DOM 中的该元素。 如果子元素不需要更改，则 DOM 中的该元素保持不受影响。

这通常很好，并且对小组件的性能影响很小甚至没有，因此通常您无需担心。

如果您有很深的组件层次结构或具有复杂渲染功能的组件，这些组件执行计算成本高的操作，如果您觉得渲染周期对性能造成影响，请考虑使用React.memo 。