高级指引

无障碍
        掠过~靠后

代码分割
        打包： 通常使用webpack、Rollup、Browserify等构建工具进行打包，为了避免打包的文件太大，前期就应该考虑问题并对代码包进行分割。对当前代码分割能够帮助“懒加载”当前用户所需要的内容，显著提高性能。常见的方法：
        import() React.lazy 异常边界捕获 基于路由的分割

Context（略-开后）
        Context 提供为了多个组件共享props的方式。

        API
                React.createContext
                        创建Context对象，当组件渲染了一个调用了Context对象的组件，这个组件会从组件树种离自己最近的匹配Provider种读取Context的值。
                React.Provider
                        提供组件数种订阅Context的变化。接受一个value并传递给订阅的组件；Provider 和 其内部的组件都不受制于 shouldComponentUpdata 函数，所以，内部组件在祖先组件退出更新时，也能更新。
                class.contextType
                        挂载在class的contextType 会被重新赋值为一个由React.createContext()创建的contenxt对象。
                React.Consumer
                        可以允许函数组件订阅。
                React.displayName
                        绑定React DevTools 的context的显示。

错误边界
        理念：为了解决JavaScript 得语法错误导致得应用奔溃
        如果一个class组件中定义了static getDerivedStateFromError() 或 componentDidCatch() ，就会形成一个带有错误边界得组件。
        错误边界无法捕获得场景
                - 事件处理
                - 异步代码（setTimeout 和 requestAnimatonFrame函数）
                - 服务端渲染
                - 组件自身得错误(非子组件)

Refs 转发
        通过组件传递给子组件得方法。可以理解为接收一个值，并转发组件渲染得组件内。

Fragments
       Fragments允许将多个组件同时给予render，而不是必须放到一个组件内
              例如：<React.Fragments>多个子组件</Reaft.Fragments>
              简写：<>多个子组件</>

高阶组件
       高阶组件可以简单理解为参数为组件，返回值也为组件的函数。通常是对返回值的重新包装
       

深入 JSX
       JSX 是 React.createElement(component,props,...children) 的语法糖；
              第一部分指定React元素的类型。大写字母表示组件。
              不能通过表达式来表示元素类型，如果像这么做，要在render前做定义：

const Div = Pent
return <Div>

性能优化
        React 本身已经对DOM操作进行了优化，但是在法本的时候还是需要对应用做优化和加速。
        - 使用生产版本（打包压缩）
        - 使用 Chrome Performance 分析
        - 使用 React Profiler 分析器对组件分析
        - 虚拟化长列表（超多行列表渲染）
        - 避免调停（尽量减少state 和 porps 的状态更新）
        - shouldComponentUpdate，PureComponent
        - 避免更改正在使用的state 和 props (扩展用算符，深拷贝等)

Portals
        将子节点渲染到父组件意外的DOM节点上（常见modal组件）

 ReactDOM.createPortal(child, container)