React新特性实例详解memolazysuspense

1. memo
介绍 React.memo 之前，先了解一下 React.Component 和 React.PureComponent。

React 允许定义一个 class 或者 function 作为组件，那么定义一个组件类，就需要继承React.Component.

class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;
  }
}
注意：继承 React.Component 的 React 组件类中，render()为必须方法，其他都为可选。

React.PureComponent 和 React.Component 类似，都是定义一个组件类。不同是 React.Component 没有实现 shouldComponentUpdate()，而 React.PureComponent 通过 props 和 state 的浅比较实现了。

如果组件的 props 和 state 相同时，render 的内容也一致，那么就可以使用 React.PureComponent 了, 这样可以提高组件的性能。

class Welcome extends React.PureComponent {render() {return <h1>Hello, {this.props.name}</h1>;
  }
}
当 props 和 state 中有复杂数据结果时，不好使用 PureComponent，还是要使用 Component。

React.memo是一个高阶组件，类似于 React.PureComponent，不同于 React.memo 是 function 组件，React.PureComponent 是 class 组件。

const MyComponent = React.memo(props => {return ();
});

这种方式依然是一种对象的浅比较，有复杂对象时无法 render。在 React.memo 中可以自定义其比较方法的实现。
memo 接收两个参数，一个是组件，一个是函数。这个函数就是定义了 memo 需不需要 render 的钩子。
比较前一次的 props 跟当前 props，返回 true 表示不需要 render。
也就是传给 Memo 的 name 不变时，不会触发 MyComponent 的 render 函数。

function MyComponent(props) {return ();
}
function areEqual(prevProps, nextProps) {
  // 就是判断 props 的变化对 UI 的影响
  if(prevProps === nextProps) {return true;}
  return falae;
}
export default React.memo(MyComponent, areEqual);

2.lazy and suspence
动态导入主要应用场景是延迟加载方法，对于组件来说，并不是很适用，但是 React.lazy 对于组件的加载则是有比较大的帮助。
注意：目前明确指出，React.lazy 和 suspense 并不适用于服务端渲染
既然是延迟加载，就会有一个加载过程，之前在渲染的时候，基本我们自都是顶一个一个 <Loading> 组件，然后通过变量控制进行操作，如果加载完成，取消掉则 <Loading> 组件。

如果直接使用 React.lazy，会报错误：需要一个占位符 ui，
Suspense 使用的时候，fallback 一定是存在且有内容的，否则会报错。
代码如下：

import React, {Component, Suspense, lazy} from 'react';
const Other1 = lazy(() => import('./other'));
const Other2 = lazy(() => new Promise(resolve =>
  setTimeout(() =>
    resolve(
      // 模拟 ES Module
      {
        // 模拟 export default 
        default: function render() {return <div>Other2 Component</div>}
      }
    ),
    3000
  )
));
class App extends Component {render() {
    return (
      <div>
        <h4> 一个基本的 lazy 和 suspense 的例子 </h4>
        <Suspense fallback={<div>Other1 Loading...</div>}>
          <Other1 />
        </Suspense>
        <h4> 一个模拟 lazy 和 suspense 的例子 </h4>
        <Suspense fallback={<div>Other2 Loading...</div>}>
          <Other2 />
        </Suspense>
      </div>
    );
  }
}

export default App;