React.memo
React.memo为高阶组件,主要作为性能优化的方式存在
该方法接收两个参数,第二个参数可选,如: React.memo(MyComponent, areEqual)
当areEqual的返回值为true时,不会触发重新渲染,返回false的时候,会触发重新渲染,和shouldComponentUpdate的返回值正好相反
默认情况下,被React.memo包裹的组件,只会进行浅比较,如果我们需要自定义比较方式,此时就需要使用areEqual方法进行比较判定
如果我们的组件中,存在useState、useReducer或者useContext的hook,当state或context发生变化时,即使它被React.memo包裹,它仍会重新渲染
function MyComponent(props) { /* 使用 props 渲染 */ } function areEqual(prevProps, nextProps) { /* 如果把 nextProps 传入 render 方法的返回结果与 将 prevProps 传入 render 方法的返回结果一致则返回 true, 否则返回 false */ } export default React.memo(MyComponent, areEqual);