对于 React 中 Component 和 PureComponent 的理解

落日映苍穹つ 2022-11-11 14:42 245阅读 0赞

#### 一、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`，可以优化组件性能