【REACT-memo缓存函数组件避免没必要的渲染】

历目

已于 2023-02-16 21:07:29 修改

阅读量216

点赞数 1

分类专栏： REACT 文章标签： react.js javascript 前端

于 2023-02-16 21:05:20 首次发布

本文链接：https://blog.csdn.net/limuzhixing/article/details/129071195

版权

REACT 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

当父组件状态改变时，所有子组件都会重新渲染，即使它们并未使用改变的状态。为了解决这个问题，React提供了memo函数，它用于function组件，类似于PureComponent对class组件的作用，可以防止无必要地渲染。在例子中，Child组件通过memo包裹，当父组件name状态改变时，Child组件不会因为这次状态变化而重新渲染。

摘要由CSDN通过智能技术生成

父组件中状态的改变会让所有的子组件重新渲染，但是对于没有用到被改变的那个状态的组件来说，重新渲染是完全没有必要的。所以，React.memo就诞生了。

PureComponent 只能用于class组件，memo只能用于function组件

import React, { Component,memo } from 'react'

export default class App extends Component {
  state = {
    name:'lala'
  }
  render() {
    return (
      <div>
        <button onClick={()=>{
          this.setState({name:'haha'})
        }}>{this.state.name}</button>
        <Child />
      </div>
    )
  }
}

const Child = memo(()=>{
  console.log('child')
  return <div>Child</div>
})