如果道具和状态没有改变，为什么 React 组件会更新

Question

当状态或属性保持不变时，React 组件正在渲染。我不明白为什么要这样做 rerender/update 因为结果不会改变

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。

如果道具和状态没有改变，为什么 React 组件会更新

Why does React component update if props and state didn't change

javascript

rendering

reactjs