React高级指引

React高级指引
1、context
一般用于嵌套组件需要共享上级组件状态的场景，避免层层传递。
订阅多个context

总结：
三种使用方式，contextType, Consumer和useContext。
区别：
ContextType，使用简单，必须用在类组件上，只能通过该API订阅单一context.
Consumer，最广泛使用的
useContext，Hook方法，只能用在函数组件当中或者自定义的Hook当中。

2、render props
将一个render函数作为prop属性进行传递。
解决的问题是：比如只有最底层下级组件依赖上级组件的状态，就可以把相关的渲染内容放到render function中进行传递，减少传递的属性数。不同的上级组件可以专属定制，不用底层组件去硬编码适配。

3、错误边界ErrorBoundary
部分渲染错误 不应该导致整个应用崩溃。一个错误的UI还不如不展示，比如支付场景。ErrorBoundary支持出错时，展示备用UI，用户体验更友好。

4、Refs转发 参考
当给一个子组件传递了ref时，如果子组件是被高阶组件包裹的，则ref实际指向的是高阶组件，而不是被包裹的子组件，如果要继续传递给子组件，则需要在高阶组件中进行refs转发：React.forwardRef((props, ref) => <Component ...props forwaredRef={ref} />)，这样子组件可以拿到ref

5、Fragments
开发中常见的一个场景是代码分组，React.Fragment允许我们将代码分组但是又不添加额外的dom节点。短语法是：<>...</>

6、高阶组件HOC（higher-order-component）

7、React.createPortal
Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案