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

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

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

相关推荐
落羽的落羽5 分钟前
【C++】神奇的AVL树
开发语言·数据结构·c++·学习
Once_day9 分钟前
代码训练LeetCode(46)旋转图像
算法·leetcode·职场和发展
麻辣长颈鹿Sir16 分钟前
【Keil】C/C++混合编程的简单方法
c语言·c++·keil·c/c++融合编程·多语言混合编程
悠哉清闲17 分钟前
C++ 指针与引用
java·c++·算法
西京刀客21 分钟前
构建 Go 可执行文件镜像 | 探索轻量级 Docker 基础镜像(我应该选择哪个 Docker 镜像?)
开发语言·docker·golang
薄情书生25 分钟前
基于51单片机的贪吃蛇游戏Protues仿真设计
c语言·嵌入式硬件·51单片机·protues
然我43 分钟前
链表指针玩不转?从基础到双指针,JS 实战带你破局
前端·数据结构·算法
EndingCoder1 小时前
算法与前端的可访问性
前端·算法·递归·树形结构
似璟如你1 小时前
Java开发八股文之基础篇+spring+集合
java·开发语言·面试
本杰明1521 小时前
2025/7/14——java学习总结
java·开发语言·学习