pureComponent的缺陷

PureComponent组件
官方提供了一个优化渲染的PureComponent 组件，PureComponent优化的原理是重写了shouldComponentUpdate，如果说老的状态对象和新的状态对像不是一个对象的话才会刷新页面，我们可以从react结构出来，

import {PureComponent} from 'react'

但是呢，别高薪的太早，这个是有缺陷的，你会发现这货只渲染一次，在就不渲染了，我们修改代码测试一下

import React,{Component, PureComponent} from 'react';
import ReactDOM from 'react-dom';
/**
 * 1.每一次都要生成一个新的对象, 深克隆是非常消耗内存的
 */
class Counter extends PureComponent{
  state = {
    counter: { number: 0}
  }
  handleClick = event => {
    let state = this.state
    // 每次生成新的对象, 这样子PureComponent组件才会刷新页面
    let amount = this.amount.value ? Number(this.amount.value) : 0
    state.counter.number = state.counter.number + amount
    this.setState(state)
  }
  render () {
    console.log('render')
    return (
      <div>
        <p>{this.state.counter.number}</p>
        <input ref={input => this.amount = input}/>
        <button onClick={this.handleClick}>add</button>
      </div>
    )
  }
}

ReactDOM.render(<Counter></Counter>, document.getElementById('root'));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
通过上边的代码测试，我们发现即使数据更新，也不会触发渲染了，此时此刻，我们只能自己动手，丰衣足食了。来来来，撸起袖子自己重写一个PureComponent组件

自己改写PureComponent组件
在当前目录新建一个js文件，命名为PureComponent.js
在PureComponent.js写一个组件，内容如下
// 在我们渲染页面，也就是setState的时候会先调用shouldComponentUpdate方法，该方法返回一个布尔值，true的话刷新页面，false的时候不刷新页面，知道这个就很好办了，
// 页面引入lodash来做对象比对
import React, { Component } from 'react';
import _ from 'lodash'
class PureComponent extends Component{
  shouldComponentUpdate (nextProps, nextState) {
    // 判断对象的属性和属性值是否相同，并将结果值返回
    return !_.isEqual(nextState, this.state)
  }

}

export default PureComponent
1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13
index.js的修改如下
import React,{Component} from 'react';
import _ from 'lodash'
import ReactDOM from 'react-dom';
import PureComponent from './PureComponent';
// PureComponent 组件优化的原理是重写了shouldComponentUpdate，如果说老的状态对象昂和新的状态对戏那个不是一个对戏那个的话才会刷新页面
/**
 * 1.每一次都要生成一个新的对象, 深克隆是非常消耗内存的
 */
class Counter extends PureComponent{
  state = {
    counter: { number: 0}
  }
  handleClick = event => {
    // 每次生成新的对象, 这样子PureComponent组件才会刷新页面
    let state = _.cloneDeep(this.state)
    let amount = this.amount.value ? Number(this.amount.value) : 0
    state.counter.number = state.counter.number + amount
    this.setState(state)
  }
  render () {
    console.log('render')
    return (
      <div>
        <p>{this.state.counter.number}</p>
        <input ref={input => this.amount = input}/>
        <button onClick={this.handleClick}>add</button>
      </div>
    )
  }
}

ReactDOM.render(<Counter></Counter>, document.getElementById('root'));

--------------------- 
作者：Corner1990 
来源：CSDN 
原文：https://blog.csdn.net/weixin_33768153/article/details/82956052 
版权声明：本文为博主原创文章，转载请附上博文链接！