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

Question

React 组件在其状态或属性保持不变时正在渲染。我不明白为什么它会重新渲染/更新，因为结果不会改变

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。