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

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

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

相关推荐
wdfk_prog17 小时前
[Linux]学习笔记系列 -- lib/dump_stack.c 栈回溯打印(Stack Trace Dumping) 内核调试与错误诊断的基石
linux·运维·服务器·c语言·笔记·学习
ITKEY_17 小时前
flutter日期选择国际化支持
开发语言·javascript·flutter
CoovallyAIHub17 小时前
医药、零件、饮料瓶盖……SuperSimpleNet让质检“即插即用”
深度学习·算法·计算机视觉
dragoooon3417 小时前
[优选算法专题二滑动窗口——串联所有单词的子串]
数据结构·c++·学习·算法·leetcode·学习方法
刃神太酷啦17 小时前
C++ 异常处理机制:从基础到实践的全面解析----《Hello C++ Wrold!》(20)--(C/C++)
java·c语言·开发语言·c++·qt·算法·leetcode
CYRUS_STUDIO17 小时前
OLLVM 移植 LLVM18 踩坑:一步步调试修复控制流平坦化
c语言·c++·llvm
q5673152317 小时前
告别低效:构建健壮R爬虫的工程思维
开发语言·爬虫·r语言
枫叶丹417 小时前
【Qt开发】显示类控件(一)-> QLabel
开发语言·qt
Python私教18 小时前
源滚滚Rust全栈班v1.02 无符号整数详解
开发语言·后端·rust
Brookty18 小时前
【算法】双指针(二)复写零
学习·算法