React hooks memo

Memo

React.memo() 和 PureComponent 很相似，它帮助我们控制何时重新渲染组件。 目前的理解就是，memo帮我们缓存组件，通过第二个参数的条件判断是否重新渲染

例子

父组件更新， 子组件不使用memo 本次父组件不传递任何属性给子组件， 父组件更新属性，子组件刷新

import React, { useState, memo } from 'react'; import PropTypes from 'prop-types'; const Child = (props) => { return ( <div className="child-container"> 这是子组件，内容固定，父组件更新的时候，我可以不用更新 </div> ); } Child.defaultProps = { val: "" } Child.propTypes = { val: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) } export default Child

父组件更新， 子组件memo不使用第二个参数 应该是默认对比pre和next里的每一项内容 本次父组件不传递任何属性给子组件， 父组件更新属性，子组件不刷新

import React, { useState, memo } from 'react'; import PropTypes from 'prop-types'; const Child = memo((props) => { return ( <div className="child-container"> 这是子组件，内容固定，父组件更新的时候，我可以不用更新 </div> ); }) Child.defaultProps = { val: "" } Child.propTypes = { val: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) } export default Child

使用memo第二个参数

对比父组件传递给子组件的所有属性 有变化则更新

const Child = memo((props) => { return ( <div className="child-container"> 这是子组件，内容固定，父组件更新的时候，我可以不用更新 </div> ); }, (pre, next) => { const keys = Reflect.ownKeys(next) return keys.every(i => pre[i] === next[i]) })

使用memo第二个参数， 对比某一个属性

对比父组件传递给子组件的所有属性 有变化则更新

const Child = memo((props) => { return ( <div className="child-container"> 这是子组件，内容固定，父组件更新的时候，我可以不用更新 </div> ); }, (pre, next) => { return pre.val === next.val })