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

LLLuckyGirl~2024-07-09 14:31

触发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>
  )
}