React 源码阅读-7
memo
React.memo 为高阶组件。它与 React.PureComponent 非常相似，但它适用于函数组件，但不适用于 class组件。
const MyComponent = React.memo(function MyComponent(props) { /* 使用 props 渲染 */});如果你的函数组件在给定相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo 中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。
此方法仅作为性能优化的方式而存在。但请不要依赖它来“阻止”渲染，因为这会产生 bug。
默认情况下其只会对复杂对象做浅层对比，如果你想要控制对比过程，那么请将自定义的比较函数通过第二个参数传入来实现
function MyComponent(props) { /* 使用 props 渲染 */}function areEqual(prevProps, nextProps) { /* 如果把 nextProps 传入 render 方法的返回结果与 将 prevProps 传入 render 方法的返回结果一致则返回 true， 否则返回 false */}export default React.memo(MyComponent, areEqual);何时使用React.memo（）
组件经常重新渲染,又是差不多的内容.纯展示组件,渲染相同的props,比如只是数字的更新,其他无变化.
// Initial render<MovieViewsRealtime views={0} title="Forrest Gump" releaseDate="June 23, 1994"/>// After 1 second, views is 10<MovieViewsRealtime views={10} title="Forrest Gump" releaseDate="June 23, 1994"/>// After 2 seconds, views is 25<MovieViewsRealtime views={25} title="Forrest Gump" releaseDate="June 23, 1994"/>function MovieViewsRealtime({ title, releaseDate, views }) { return ( <div> <MemoizedMovie title={title} releaseDate={releaseDate} /> Movie views: {views} </div> )}// etcReact.memo() and callback functions
这里的 callback 指的是usecallbackreact新增的api.还没看到那一部分,暂时先 mark 一下
const MemoizedLogout = React.memo(Logout);function MyApp({ store, cookies }) { const onLogout = useCallback(() => cookies.clear(), [cookies]); return ( <div className="main"> <header> <MemoizedLogout username={store.username} onLogout={onLogout} /> </header> {store.content} </div> );}https://segmentfault.com/a/11...https://dmitripavlutin.com/us...
https://zh-hans.reactjs.org/d...