美文网首页
聊一聊React中Component、PureComponent

聊一聊React中Component、PureComponent

作者: 24K纯帅豆 | 来源:发表于2020-08-06 10:28 被阅读0次

    Component和PureComponent

    首先来说一下 ComponentPureComponent 的区别,其实他们俩基本是一样的,因为后者继承前者,细微的区别就是 PureComponent 可能会帮我们提升程序的性能,怎么说呢?它的内部实现了 shouldComponentUpdate 方法,我们应该都知道这个方法是干嘛的吧,帮助我们减少不必要的 render,我们通常会在 shouldComponentUpdate 方法中判断props或者state的值是不是和之前的一样,然后来决定是否重新 render ,来看一个最简单的例子:

    class Test extends PureComponent<any, any> {
    
      constructor(props: any) {
        super(props)
        this.state = {
          isShow: false,
        }
      }
    
      click = () => {
        this.setState({
          isShow: true
        })
      }
    
      render() {
        console.log('render');
        return (
          <div>
            <button onClick={this.click}>index</button>
            <p>{this.state.isShow.toString()}</p>
          </div>
        )
      }
    }
    

    在上面这个例子中,通过按钮去改变state中isShow这个属性的值,但是第一次改变之后后面这个值就不会变了,如果用PureComponent的话那么只会在第一次点击的时候会重新render,但是使用Component的话,那么每次点击都会触发render。所以这里使用PureComponent能帮我们提升一定的性能。那么有些人可能就会说那我是不是只用PureComponent就好了,那我只能说

    image.png

    我们把上面的isShow参数换一下,换成一个对象试试:

      constructor(props: any) {
        super(props)
        this.state = {
          user: {
            name: '24K纯帅',
            gender: '男'
          }
        }
        console.log('constructor');
      }
    
      click = () => {
        this.setState((preState: any) => {
          const { user } = preState
          user.name = "Jack"
          return { user }
        }, () => {
          console.log(this.state.user)
        })
      }
    
      render() {
        console.log('render');
        return (
          <div>
            <Button primary="true" onClick={this.click}>index</Button>
            <Button>{this.state.user.name}</Button>
          </div>
        )
      }
    }
    

    我们发现如果使用PureComponent的话,点击按钮之后都不会触发render了,使用Component才行,看到这里是不是脑袋一大堆问号

    image.png

    原来PureComponent内部实现的shouldComponentUpdate方法只是进行了浅比较,怎么说呢,你可以理解为只是针对基本数据类型才有用,对于对象这种引用数据类型是不行的。

    React.memo()

    其实这个和PureComponent功能是一样的,只不过memo是提供给函数组件使用的,而PureComponent是提供给class组件使用的,还有一点就是memo提供一个参数可以让我们自行配置可以对引用数据做比较然后触发render

    相关文章

      网友评论

          本文标题:聊一聊React中Component、PureComponent

          本文链接:https://www.haomeiwen.com/subject/dianrktx.html