React16的memo函数有啥用

原创

挥刀北上

修改于 2020-08-18 10:13:32

1.2K00

代码可运行

文章被收录于专栏：Node.js开发Node.js开发

运行总次数：0

代码可运行

React16的memo和PureComponent作用类似，只不过前者只适用于函数组件，后者适应于类组件。

关于两者的作用，我们先从PureComponent说起，在了解PureComponent之前要先了解shouldComponentUpdate函数，在类组件中有一个叫做shouldComponentUpdate的生命周期函数，这个函数可以通过返回true或false来决定当前组件是否重新渲染。

而PureComponent自带shouldComponentUpdate函数，PureComponent自带的shouldComponentUpdate函数会在当前组件的props或者state发生变化时，对props或者state进行浅对比，如果相同则不进行重新渲染，反之则会进行渲染。

说到这里来了解一下浅对比，啥叫浅对比呢，类似于浅拷贝，具体的内容大家可以去百度，这里不做赘述，只做简单说明，举个例子，看代码：

import React,{memo} from "react";
import ReactDOM from 'react-dom';
class CommentList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      commentList: [{
        body: '大三岁', author: '张三'
      }, {
        body: '新冠病毒', author: '李四'
      }]
    }
  }

  componentWillMount() {
    setTimeout(() => {
      this.setState((prevState, props) => {
        return {
          commentList: [{
            body: '大三岁', author: '张三'
          }, {
              body: '新冠1病毒', author: '李四'
          }]
        }
      })
    }, 1000)
  }

  render() {
    return (
      <div>
        {
          this.state.commentList.map((item, index) => {
            return <Comment {...item} key={index} />
          })
        }
      </div>
    )

  }
}
function Comment(props) {
  console.log('渲染了', props)
  return <div>
    <p>{props.body}</p>
    <p>{props.author}</p>
    <p>{props.arr.length}</p>
  </div>
}

阅读源码，我们定义了两个组件，CommentList组件与Comment组件，CommentList组件内部的state是一个数组，每条数据用Comment来渲染。我们在componentWillMount设置定时器模拟数据发生变化，我们看到第二条数据的body发生变化了，所以对应的comment组件应该重新渲染，但是我们发现所有Comment组件都重新渲染了。这不利于我们页面的性能优化，咋办呢？

此时我们可以借助memo或者PureComponent来实现只让该渲染的组件渲染，啥是该渲染的组件呢？那就是props或者state发生变化的组件，那变化的标准是怎么样的呢？

来看代码，用memo来实现：

import React,{memo} from "react";
import ReactDOM from 'react-dom';
class CommentList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      commentList: [{
        body: '大三岁', author: '张三' 
      }, {
        body: '新冠病毒', author: '李四' 
      }]
    }
  }

  componentWillMount() {
    setTimeout(() => {
      this.setState((prevState, props) => {
        return {
          commentList: [{
            body: '大三岁', author: '张三'
          }, {
              body: '新冠1病毒', author: '李四'
          }]
        }
      })
    }, 1000)
  }

  render() {
    return (
      <div>
        {
          this.state.commentList.map((item, index) => {
            return <Comment {...item} key={index} />
          })
        }
      </div>
    )

  }
}



function Comment(props) {
  console.log('渲染了', props)
  return <div>
    <p>{props.body}</p>
    <p>{props.author}</p>
    <p>{props.arr.length}</p>
  </div>
}

// 第一种方式 用memo包裹函数组件
Comment = memo(Comment)

用PureComponent来实现：

import React,{memo} from "react";
import ReactDOM from 'react-dom';
class CommentList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      commentList: [{
        body: '大三岁', author: '张三' 
      }, {
        body: '新冠病毒', author: '李四' 
      }]
    }
  }

  componentWillMount() {
    setTimeout(() => {
      this.setState((prevState, props) => {
        return {
          commentList: [{
            body: '大三岁', author: '张三'
          }, {
              body: '新冠1病毒', author: '李四'
          }]
        }
      })
    }, 1000)
  }

  render() {
    return (
      <div>
        {
          this.state.commentList.map((item, index) => {
            return <Comment {...item} key={index} />
          })
        }
      </div>
    )

  }
}

class Comment extends React.PureComponent {
  constructor() {
    super()
  }
  render() {
    console.log('渲染了')
    const props = this.props
    return <div>
      <p>{props.body}</p>
      <p>{props.author}</p>
    </div>
  }
}

阅读源码，我们分别用memo和PureComponent改造了代码，并且运行的话，只有该渲染的组件发生了渲染。

渲染的组件前后的props发生变化的组件才会重新渲染，来看一下props或者state发生变化的标准：

{body: '新冠病毒', author: '李四'} 

{body: '新冠1病毒', author: '李四'}

上面两个对象进行浅对比body发生变化，所以会渲染，而另一个组件数据没变所以没有重新渲染，从而提高了页面性能。

以上便是memo的作用了，但是这里有一个问题，那就是如果props中的某一个属性是引用数据类型，这个引用数据发生改变，但是引用未变，组件是不会重新渲染的，首先我们看下不使用memo的代码：

import React,{memo} from "react";
import ReactDOM from 'react-dom';
class CommentList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      commentList: [{
        body: '大三岁', author: '张三',arr:[]
      }, {
        body: '新冠病毒', author: '李四',arr:[]
      }]
    }
  }

  componentWillMount() {
    setTimeout(() => {
      this.state.commentList[0].arr.push(999)
      this.setState({ commentList: this.state.commentList})
    }, 1000)
  }

  render() {
    return (
      <div>
        {
          this.state.commentList.map((item, index) => {
            return <Comment {...item} key={index} />
          })
        }
      </div>
    )

  }
}

// 

function Comment(props) {
  console.log('渲染了', props)
  return <div>
    <p>{props.body}</p>
    <p>{props.author}</p>
    <p>{props.arr.length}</p>
  </div>
}

上面的代码，我们没有使用memo，Comment的props发生变化后，所有的Comment组件都重新渲染了，如图：

上图红框处显示了组件重新渲染了，然后我们用memo改造代码：

import React,{memo} from "react";
import ReactDOM from 'react-dom';
class CommentList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      commentList: [{
        body: '大三岁', author: '张三',arr:[]
      }, {
        body: '新冠病毒', author: '李四',arr:[]
      }]
    }
  }

  componentWillMount() {
    setTimeout(() => {
      this.state.commentList[0].arr.push(999)
      this.setState({ commentList: this.state.commentList})
    }, 1000)
  }

  render() {
    return (
      <div>
        {
          this.state.commentList.map((item, index) => {
            return <Comment {...item} key={index} />
          })
        }
      </div>
    )

  }
}

// 

function Comment(props) {
  console.log('渲染了', props)
  return <div>
    <p>{props.body}</p>
    <p>{props.author}</p>
    <p>{props.arr.length}</p>
  </div>
}


Comment = memo(Comment)