react重新渲染以及避免不必要的渲染

触发react重新渲染

类组件触发重新渲染

1、setState

2、context

3、props

4、forceUpdate

函数式组件重新渲染

1、useState

2、props

避免不必要的渲染

类组件避免不必要的渲染

1、React.PureComponent/shouldComponentUpdate

函数式组件避免不必要的渲染

1、React.memo

2、useMemo(缓存变量)

3、useCallback(缓存函数)

context在类组件和函数式组件中的使用

创建context对象

javascript 复制代码
import { createContext } from 'react'
const contextObj = createContext()
const { Provider, Consumer } = context

注入数据

javascript 复制代码
function APP() {

    ...
    ...
    ...

    return (
        <provide value={name: 'xiaoliu'}>
            <div></div>
        </Provide>
    )
}
类组件
javascript 复制代码
class Son2 extends Component {
  static contextType = context
  render() {
    const { name } = this.context
    return (
      <>
        我是Son,我拿到的数据是:{name}
      </>
    )
  }
}
函数式组件

1、通过Consume拿到数据

javascript 复制代码
const Son1 = () => {
  return (
    <Consumer>
      {({ name }) => (
        <div>
          我是Son,我拿到的数据是:{name}
        </div>
      )}
    </Consumer>
  )
}

2、 通过useContext 方式

javascript 复制代码
const Son3 = () => {
  const { name } = useContext(context)
  return (
    <div>
      我是Son1,我拿到的数据是:{name}
    </div>
  )
}
相关推荐
掘金者阿豪12 分钟前
打通KingbaseES与MyBatis:一篇详尽的Java数据持久化实践指南
前端·后端
RoyLin1 小时前
TypeScript设计模式:原型模式
前端·后端·node.js
我是天龙_绍1 小时前
vue Composables 组合式函数
前端
zjjuejin1 小时前
Maven项目的核心蓝图:POM文件
前端·maven
小气小憩1 小时前
“暗战”百度搜索页:Monica悬浮球被“围剿”,一场AI Agent与传统巨头的流量攻防战
前端·人工智能
前端付豪1 小时前
1、震惊!99% 前端都没搞懂的 JavaScript 类型细节
前端·javascript·面试
朝与暮1 小时前
js符号(Symbol)
前端·javascript
恋猫de小郭2 小时前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
用户7678797737322 小时前
后端转全栈之Next.js数据获取与缓存
react.js·next.js
大怪v2 小时前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法