欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

对于 React 中 Component 和 PureComponent 的理解

程序员文章站 2022-03-26 08:42:26
...

一、Component 和 PureComponent

  1. 在 React 中，Component 存在的问题，如下所示：
  • 父组件重新 render(), 当前组件也会重新执行 render(), 即使没有任何变化
  • 当前组件 setState(), 重新执行 render(), 即使 state 没有任何变化
  1. 对于 React 中解决 Component 存在的问题，如下所示：
  • 原因，组件的 componentShouldUpdate() 默认返回 true, 即使数据没有变化 render() 都会重新执行
  • 办法一，重写 shouldComponentUpdate(), 判断如果数据有变化返回 true, 否则返回 false
  • 办法二，用 PureComponent代替 Component
  • 说明，一般都使用 PureComponent 来优化组件性能
  1. 在 React 中，PureComponent 的基本原理，如下所示：
  • 重写实现 shouldComponentUpdate()
  • 对组件的新/旧 state 和 props 中的数据进行浅比较, 如果都没有变化, 返回 false, 否则返回 true
  • 一旦 componentShouldUpdate() 返回 false 不再执行用于更新的 render()

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

  2. 对于 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 的常见面试题

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

shouldComponentUpdate

  1. PureComponent 的原理是什么？

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

  1. Component 与 PureComponent 的区别是什么？

使用 PureComponent代替 Component，可以优化组件性能

相关标签： React React Component PureComponent

上一篇： C#图书管理系统 附源码下载

下一篇： 丽妃是什么人？咸丰最宠爱的女人，慈禧都不敢动她

推荐阅读