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

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

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

相关推荐
Orlando cron25 分钟前
数据结构入门:链表
数据结构·算法·链表
丁劲犇35 分钟前
用 Turbo Vision 2 为 Qt 6 控制台应用创建 TUI 字符 MainFrame
开发语言·c++·qt·tui·字符界面·curse
旷世奇才李先生1 小时前
Next.js 安装使用教程
开发语言·javascript·ecmascript
牛客企业服务1 小时前
2025年AI面试推荐榜单,数字化招聘转型优选
人工智能·python·算法·面试·职场和发展·金融·求职招聘
charlie1145141911 小时前
深入理解Qt的SetWindowsFlags函数
开发语言·c++·qt·原理分析
呜喵王阿尔萨斯1 小时前
编程中的英语
c语言·c++
糖葫芦君2 小时前
Policy Gradient【强化学习的数学原理】
算法
likeGhee2 小时前
python缓存装饰器实现方案
开发语言·python·缓存
whoarethenext2 小时前
使用 C++/Faiss 加速海量 MFCC 特征的相似性搜索
开发语言·c++·faiss
项目題供诗2 小时前
黑马python(二十五)
开发语言·python