React.memo() - React.lazy()

介绍

• 包装函数
• PureComponent
• React.memo()
• Redux配合使用
• React.lazy()

1. React v16.6.0出了一些新的包装函数(wrapped functions)，一种用于函数组件PureComponent / shouldComponentUpdate形式的React.memo()

2. React.memo()是一个高阶函数，它与 React.PureComponent类似，但是一个函数组件而非一个类。

import React  from 'react';

export default class extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            date : new Date()
        }
    }

    componentDidMount(){
        setInterval(()=>{
            this.setState({
                date:new Date()
            })
        },1000)
    }

    render(){
        return (
            <div>
                <Child seconds={1}/>
                <div>{this.state.date.toString()}</div>
            </div>
        )
    }
}

现在有一个显示时间的组件,每一秒都会重新渲染一次，对于Child组件我们肯定不希望也跟着渲染，所有需要用到PureComponent

PureComponent

 class Child extends React.PureComponent {
    render(){
        console.log('I am rendering');
        return (
            <div>I am update every {this.props.seconds} seconds</div>
        )
    }
}

现在新出了一个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>
));

const RocketComponent = props => <div>my rocket component. {props.fuel}!</div>;

// create a version that only renders on prop changes
const MemoizedRocketComponent = React.memo(RocketComponent);

React.memo() 与Redux

"react-redux": "5.1.0",
"redux": "4.0.1"

import React from "react";

function Child({seconds,state}){
    console.log('I am rendering');
    return (
      <div>
        <div>I am update every {seconds} seconds</div>
        <p>{state}</p>
      </div>
    )
};
const mapStateToProps = state => ({
    state: 'React.memo()用在connect()(内)'
});
export default connect(mapStateToProps)(React.memo(Child))

这是一个对于 React 非常有用的新功能，因为我们之前只能使用 class component 来利用 PureComponent 带来的性能优势。而现在，我们有了 React.memo()，就可以使用 functional component 了！它帮助我们控制何时重新渲染组件

组件仅在它的 props 发生改变的时候进行重新渲染。通常来说，在组件树中 React 组件，只要有变化就会走一遍渲染流程。但是通过 PureComponent 和 React.memo()，我们可以仅仅让某些组件进行渲染。PureComponent 要依靠 class 才能使用。而 React.memo() 可以和 functional component 一起使用。

memoization是一种将函数执行结果用变量缓存起来的方法。当函数进行计算之前，先看缓存对象中是否有次计算结果，如果有，就直接从缓存对象中获取结果；如果没有，就进行计算，并将结果保存到缓存对象中

补充 React 16.6.0 还更新了一个重要功能 React.lazy():

使用 React Suspense 进行代码拆分和懒加载

import React, {Component, Suspense} from 'react';
const TopSearch = React.lazy(() => import('./components/TopSearch'));
-使用代码片段
    <Col className="gutter-row" md={8}>
                        <Suspense fallback={null}>
                            <TopSearch
                                loading={true}
                                 visitData={visitData}
                                 selectDate={this.selectDate}
                                searchData={searchData}
                                dropdownGroup={dropdownGroup}
                            />
                        </Suspense>
                    </Col>

参考https://www.jianshu.com/p/b3d07860b778