对于 React 中 Component 和 PureComponent 的理解

最新推荐文章于 2025-05-24 10:06:09 发布

原创最新推荐文章于 2025-05-24 10:06:09 发布 · 388 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#React #Component #PureComponent

React 专栏收录该内容

35 篇文章

订阅专栏

一、Component 和 PureComponent

在 React 中，Component 存在的问题，如下所示：

父组件重新 render(), 当前组件也会重新执行 render(), 即使没有任何变化
当前组件 setState(), 重新执行 render(), 即使 state 没有任何变化

对于 React 中解决 Component 存在的问题，如下所示：

原因，组件的 componentShouldUpdate() 默认返回 true, 即使数据没有变化 render() 都会重新执行
办法一，重写 shouldComponentUpdate(), 判断如果数据有变化返回 true, 否则返回 false
办法二，用 PureComponent代替 Component
说明，一般都使用 PureComponent 来优化组件性能

在 React 中，PureComponent 的基本原理，如下所示：

重写实现 shouldComponentUpdate()
对组件的新/旧 state 和 props 中的数据进行浅比较, 如果都没有变化, 返回 false, 否则返回 true
一旦 componentShouldUpdate() 返回 false 不再执行用于更新的 render()

在 shouldComponentUpdate 中，用来决定当前组件是否应该重新 render(), 如果返回 true, 就会去重新 render(), 否则结束。shouldComponentUpdate 包含两个参数，nextProps 和 nextState。如果 this.props.m1===nextProps.m1 && this.state.m2===nextState.m2，比较新旧 props 中的和 state 数据, 如果没有一个变化的返回 false, 否则 true。
对于 React 中 Component 和 PureComponent 的简单应用，代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>component与pureComponent</title>
</head>
<body>

<div id="example"></div>

<script type="text/javascript" src="./js/react.development.js"></script>
<script type="text/javascript" src="./js/react-dom.development.js"></script>
<script type="text/javascript" src="./js/babel.min.js"></script>

<script type="text/babel">

  class A extends React.Component {

    state = {
      m1: {count: 1}
    }

    test1 = () => {
      /*this.setState(state => ({
        m1: {count: state.m1.count + 1}
      }))*/

//      const m1 = this.state.m1
//      m1.count = 2
//      this.setState({m1})
//      this.setState({m1: {...m1}})

      this.setState({})
    }

    render() {
      console.log('A render()')
      return (
        <div>
          <h1>A组件: m1={this.state.m1.count}</h1>
          <button onClick={this.test1}>A 测试1</button>
          <B m1={this.state.m1}/>
        </div>
      )
    }
  }

  class B extends React.PureComponent {

    state = {
      m2: 1
    }

    test2 = () => {
      this.setState({})
    }

    /*shouldComponentUpdate (nextProps, nextState) {
      console.log('shouldComponentUpdate()')
      // 比较新旧props中的和state数据, 如果没有一个变化的返回false, 否则true
      if(this.props.m1===nextProps.m1 && this.state.m2===nextState.m2) {
        return false
      } else {
        return true
      }

      // return true  // Component中的默认为true
    }*/

    render() {
      console.log('B render()')
      return (
        <div>
          <h1>B组件: m2={this.state.m2}, m1.count={this.props.m1.count}</h1>
          <button onClick={this.test2}>B 测试2</button>
        </div>
      )
    }
  }

  ReactDOM.render(<A/>, document.getElementById('example'))
</script>
</body>
</html>

二、React 中 Component 和 PureComponent 的常见面试题

组件的哪个生命周期勾子能实现组件优化？

shouldComponentUpdate

PureComponent 的原理是什么？

重写实现 shouldComponentUpdate()；对组件的新/旧 state 和 props 中的数据进行浅比较, 如果都没有变化, 返回 false, 否则返回 true；一旦 componentShouldUpdate() 返回 false 不再执行用于更新的 render()