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

【问题标题】：Why does React component update if props and state didn't change如果 props 和 state 没有改变，为什么 React 组件会更新
【发布时间】：2020-03-22 19:55:54
【问题描述】：

当状态或属性保持不变时，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 避免了许多无用的重新渲染。

【问题讨论】：

如果父级重新渲染，子级将重新渲染，这发生在按钮单击时
所以你的问题是......你认为 React 避免了许多无用的重新渲染？您是否有要解决的特定编码问题？您在父组件中调用了 setState()，导致父组件和所有子组件重新渲染。

标签： javascript reactjs rendering

【解决方案1】：

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

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

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

如果子元素确实需要改变，那么实际DOM中的那个元素会被重新渲染。如果子元素不需要更改，则 DOM 中的该元素保持不受影响。

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

如果您有较深的组件层次结构或具有复杂渲染功能的组件执行计算量大的操作，如果您认为渲染周期对性能造成影响，请考虑使用React.memo。

【讨论】：