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对象

import { createContext } from 'react'
const contextObj = createContext()
const { Provider, Consumer } = context

注入数据

function APP() {.........return (<provide value={name: 'xiaoliu'}><div></div></Provide>)
}

类组件

class Son2 extends Component {static contextType = contextrender() {const { name } = this.contextreturn (<>我是Son，我拿到的数据是：{name}</>)}
}

函数式组件

1、通过Consume拿到数据

const Son1 = () => {return (<Consumer>{({ name }) => (<div>我是Son，我拿到的数据是：{name}</div>)}</Consumer>)
}

2、 通过useContext 方式

const Son3 = () => {const { name } = useContext(context)return (<div>我是Son1，我拿到的数据是：{name}</div>)
}