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