performance - 当组件有子组件时，React.PureComponent 不起作用？

Question

使用 PureComponent 来提高 React 中的渲染性能似乎是一种常见的技术。然而，当使用具有子项作为 props 的 PureComponent 时，情况似乎并非如此。

class App extends React.PureComponent {
  render() {
    console.log('re-render') 
    return <div>{this.props.children}</div>
  }
}

const render = () => {
  ReactDOM.render(
    <App>
      <div />
    </App>,
    document.getElementById('app')
  )
  setTimeout(render, 1000)
}

render()

结果是控制台每 1 秒就会记录一次“重新渲染”。看来 children ( <div /> )是上面 App 的唯一支柱组件并且永远不会改变，为什么应用程序仍然会重新渲染？

注意:如果出现任何混淆，问题是相同的，为什么上面的 PureComponent 的 SCU(shouldComponentUpdate) 钩子(Hook)返回 true 因为 Prop 似乎没有改变？

Answer 1

这里发生的事情是您实际上正在调用 ReactDOM.render() ，页面(或应用程序，我想你在这里有一个拼写错误)组件将触发它的 render()无论使用 Component 都能发挥作用或PureComponent .

PureComponent 可以帮助减少不必要的渲染的方式是，当有 prop 更改时，PureComponent 将在 this.props 上进行浅层比较。和nextProps确定此 PureComponent 是否需要调用 render() .

<小时/>

我刚刚为你做了这个例子:

class App extends React.PureComponent {
  state = {value: 0}

  componentDidMount() {
    setInterval(() => {
      this.setState({value: Math.random()})
    }, 1000)
  }

  render() {
    return (
      <div>
        <PureChild value="fixed value"/>
        <ImpureChild value="fixed value"/>
      </div>
    )
  }
}

class PureChild extends React.PureComponent {
  render() {
    console.log('rendering PureChild')
    return <div>{this.props.value}</div>
  }
}

class ImpureChild extends React.Component {
  render() {
    console.log('rendering ImpureChild')
    return <div>{this.props.value}</div>
  }
}

注意以下几点:

1. 两个 child 都收到固定 Prop (“固定值”字符串)
2. 每 1 秒，父级 <App />更改value状态，因此它重新渲染，导致其所有子级也重新渲染。
3. 但是自 <PureChild />是一个 PureComponent，它对其旧 props 和传入的新 props 进行浅层比较，并注意到这两个 props 都是 "fixed value" ，因此它不会触发渲染!

如果运行此代码并打开控制台，您将每隔 1 秒看到“rendering ImpureChild”，但“rendering PureChild”只会出现一次。