react组件优化之React.PureComponent,React.memo

在开发中我们经常会考虑项目的优化问题,react作为现在前端的热门框架用的人肯定是非常的多。项目的优化问题也是非常重要的一部分,能大大提高项目的流畅度,用户体验会非常好。react项目中会用到大量的组件嵌套,减少一些组件的不必要的渲染,可以大大减少损耗。

React.PureComponent和React.memo比较相似,都可以控制组件什么时候应该渲染,但是是浅比较,这意味着对于数组和对象不会进行深层次的比较。

下面我们来看一个例子:

React.PureComponent要搭配类组件;

React.memo搭配函数组件

父组件

复制代码
class Parent extends React.Component {
  state = {
    content:[{name: "name", age: 0},{name: "name", age: 0}]
  }
  componentDidMount(){
    setInterval(() => {//每隔一秒赋值一次,每次赋的值相同查看子组件的渲染情况
      this.setState({ content: [{name: "jock", age: 20},{name: "bob", age: 30}] })
    },1000)
  }
  render(){
    return (
      <div>
        {this.state.content.map((item, index) => <Son data={item} key={index}></Son>)}
      </div>
    )
  }
}

子组件

复制代码
function Son(props) {
  console.log("i am son");//写个输出看看子组件是否每次都渲染
  return <div>{props.data.name} --- {props.data.age}</div>
}

控制台输出如下:
1.png

我们发现即使父组件每次赋的值相同子组件还是会每次都渲染,显然这不是我们想要的结果。

React.PureComponent

复制代码
class Son extends React.PureComponent {
  render(){
    console.log("i am son")
     return <div>{props.data.name} --- {props.data.age}</div>
  }}

控制台输出如下:
2.png

我们发现结果和之前一样,这就是我们之前说到的浅比较的原因。接下来我们改变一下我们的父组件给子组件的传值方式修改父组件如下:

复制代码
class Parent extends React.Component {
  state = {
    content:[{name: "name", age: 0},{name: "name", age: 0}]
  }
  componentDidMount(){
    setInterval(() => {
      this.setState({ content: [{name: "jock", age: 20},{name: "bob", age: 30}] })
    },1000)
  }
  render(){
    return (
      <div>
        {this.state.content.map((item, index) => <Son {...item} key={index}></Son>)}
      </div>
    )
  }
}

把之前的自定义属性传值变为了es6的扩展运算符传值。那么子组件接收传过来的值也要发生改变

复制代码
class Son extends React.PureComponent {
  render(){
    console.log("i am son")
     return <div>{this.props.name} --- {this.props.age}</div>
}}

这时我们查看控制台:
3.png

发现只有初始化和第一次修改时子组件重新渲染了。

React.memo

相当于一个高阶组件,可以返回一个组件,使用如下父组件还保持上个例子的最后一次修改后的状态,只修改子组件即可(注释之前的子组件)

复制代码
const Son = React.memo(function(props){
  console.log("i am son")
  return <div>{props.name} --- {props.age}</div>
})

查看控制台输出:
4.png

也是渲染了两次。
© 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦!!!

相关推荐
cwplh6 分钟前
MX模拟赛总结
算法·动态规划
NG WING YIN10 分钟前
Golang關於信件的
开发语言·深度学习·golang
Sunny_yiyi15 分钟前
Java根据模版导出PDF文件
java·开发语言·pdf
橘子1319 分钟前
C++实战:搜索引擎项目(二)
开发语言·c++·搜索引擎
浅川.2519 分钟前
xtuoj 随机数
算法
shan&cen20 分钟前
Day02 集合 | 30. 串联所有单词的子串、146. LRU 缓存、811. 子域名访问计数
java·数据结构·算法·缓存
阿方.9181 小时前
《树与二叉树详解:概念、结构及应用》
数据结构·二叉树··知识分享
赵谨言1 小时前
基于python人物头像的卡通化算法设计与实现
开发语言·经验分享·python
应用市场1 小时前
Qt C++ 图形绘制完全指南:从基础到进阶实战
开发语言·c++·qt
NAGNIP1 小时前
大模型微调框架之TRL
算法