【React优化】React.Fragment、React.PureComponent和React.lazy()

这三个东西没有必要的相关性，只是今天查资料一起学习了。

React.Fragment

场景： 用于为一个组件返回多个元素。

官方文档：

React 中一个常见模式是为一个组件返回多个元素。以前我都是在外层加一个div包裹，Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点。

Fragments 看起来像空的 JSX 标签：

render() {
  return ( // 需要括号
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

另一种使用片段的方式是使用 React.Fragment 组件，React.Fragment 组件可以在 React 对象上使用。 这可能是必要的，如果你的工具还不支持 JSX 片段。 注意在 React 中， <> 是 的语法糖。

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

带 key 的 Fragments

<> 语法不能接受键值或属性。
如果你需要一个带 key 的片段，你可以直接使用 。
key 是唯一可以传递给 Fragment 的属性。

ps：React16开始，render支持返回数组，可以减少不必要的节点嵌套。上面的代码也可以写成这样：

return [
	<Modal/>
	<ConfirmModal/>
]

React.lazy() 和 Suspense

场景： 组件延迟加载。

动态 import 主要应用场景是延迟加载方法，对于组件来说，并不是很适用，但是 React.lazy 对于组件的加载则是有比较大的帮助。

目前明确指出，React.lazy 和 suspense 并不适用于服务端渲染。

例子：

import React, { Component, Suspense } from 'react';

const Child = React.lazy(() => import('./components/Child'));

class Analysis extends Component{

	render(){
		return <Suspense fallback={<div>loading...</div>}>
            <Child/>
          </Suspense>
	}
}

其中，Child是需要延迟加载的组件，外层需要通过Suspense包裹。