zoukankan      html  css  js  c++  java
  • React.memo() --- 函数组件专有优化

    React 16.6.0 正式发布了!这次主要更新了两个新的重要功能:

    • React.memo()
    • React.lazy(): 使用 React Suspense 进行代码拆分和懒加载

    React.memo() 是什么?

    React.memo() 和 PureComponent 很相似,它帮助我们控制何时重新渲染组件。同时,又是一个高阶组件。

    组件仅在它的 props 发生改变的时候进行重新渲染。通常来说,在组件树中 React 组件,只要有变化就会走一遍渲染流程。但是通过 PureComponent 和 React.memo(),我们可以仅仅让某些组件进行渲染。
    const ToBeBetterComponent = React.memo(function MyComponent(props) {
      // only renders if props have changed
    })

    由于只有需要被渲染的组件被渲染了,所以这是一个性能提升。

    PureComponent 要依靠 class 才能使用。而 React.memo() 可以和 functional component 一起使用。

    import React from 'react';
    
    const MySnowyComponent = React.memo(function MyComponent(props) {
      // only renders if props have changed!
    });
    
    // can also be an es6 arrow function
    const OtherSnowy = React.memo(props => {
      return <div>my memoized component</div>;
    });
    
    // and even shorter with implicit return
    const ImplicitSnowy = React.memo(props => (
      <div>implicit memoized component</div>
    ));

    包裹已有的组件

    由于 React.memo() 是一个高阶组件,你可以使用它来包裹一个已有的 functional component:

    const RocketComponent = props => <div>my rocket component. {props.fuel}!</div>;
    
    // create a version that only renders on prop changes
    const MemoizedRocketComponent = React.memo(RocketComponent);

    为什么它被称作 memo?

    它会检查接下来的渲染是否与前一次的渲染相同,如果两者是一样的,那么就会保留上一次的渲染结果。

    结论

    
    

     此方法仅作为性能优化的方式而存在。但请不要依赖它来“阻止”渲染,因为这会产生 bug。


    这是一个对于 React 非常有用的新功能,因为我们之前只能使用 class component 来利用 PureComponent 带来的性能优势。而现在,我们有了 React.memo(),就可以使用 functional component 了!

    参考

    https://www.jianshu.com/p/9293daab4161

  • 相关阅读:
    node起本地服务器以及实现代理,前端接口转发
    一键前端代理,一行命令开启nginx容器,代理前端页面
    go语言学习笔记
    patch需要数据格式前端算法,patch算法基础,两个对象对比取差异属性
    react-native中使用Echarts,自己使用WebView封装Echarts经验
    如何用js自己实现Animate运动函数
    vue中的表单异步校验方法封装
    Entity Framework6使用SQL Server Compact免安装部署
    WCF异常传播
    解决.net的堆碎片化带来的内存占用过大的问题
  • 原文地址:https://www.cnblogs.com/-roc/p/14919086.html
Copyright © 2011-2022 走看看