标签：返回 渲染 memo React MyComponent areEqual

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);

标签：返回,渲染,memo,React,MyComponent,areEqual
来源： https://www.cnblogs.com/xiaoxiaopao/p/16455296.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。