当前位置: 首页 > Web前端 > HTML5

React源码阅读-7_038

时间:2023-04-05 18:05:23 HTML5

React源码阅读-7memoReact.memo是一个高级组件。它与React.PureComponent非常相似,但它适用于函数组件而不是类组件。constMyComponent=React.memo(functionMyComponent(props){/*使用props渲染*/});如果你的函数组件在给定相同的props的情况下呈现相同的结果,那么你可以通过将其包装在React.memo中来实现这一点,以通过记住组件的渲染结果来提高组件的性能。这意味着在这种情况下,React将跳过渲染组件并直接重用最近渲染的结果。此方法仅作为性能优化存在。但请不要依赖它来“阻止”渲染,因为这会产生错误。默认情况下,它只会对复杂对象进行浅层比较。如果要控制比较过程,请传入自定义比较函数作为第二个参数实现functionMyComponent(props){/*使用props渲染*/}functionareEqual(prevProps,nextProps){/*如果返回将nextProps传入render方法的结果与将prevProps传入render方法的返回结果一致,返回true,否则返回false*/}exportdefaultReact.memo(MyComponent,areEqual);何时使用React.memo()组件经常被重新渲染,而且几乎是相同的内容。纯展示组件,渲染相同的道具,比如只是数字更新,没有其他变化。//Initialrender//2秒后,views是25{return(

Movieviews:{views}
)}//etcReact.memo()和回调函数这里的回调指的是是usecallbackreact的新api。我还没有看到那部分。暂时标记为constMemoizedLogout=React.memo(Logout);functionMyApp({store,cookies}){constonLogout=useCallback(()=>cookies.clear(),[cookies]);返回(
{store.content}
);}https://segmentfault.com/a/11...https://dmitripavlutin.com/us...https://zh-hans.reactjs.org/d...

猜你喜欢