react高级指引

/**

* 1.无障碍

* jsx支持所有aria-*HTML属性,虽然大多数DOM变量和属性名都使用驼峰命名，

* 但aria-*应该像在HTML中一样使用带连字符的命名法。

* **语义化的HTML**

* 当语义化的html被破坏，使用Fragments来组合各个组件

* 创造一个元素的ref React.createRef() 通过访问current来获得 DOM 节点

* 当使用HOC来扩展组件时，建议使用react的forwardRef函数来向被包裹的组件转发ref

* 如果第三方的HOC不支持转发ref，通过父组件传参的方式

*

* 2.代码分割

* React.lazy函数可以像渲染常规组件一样处理动态引入(的组件)

* const OtherComponent = React.lazy(() => import('./OtherComponent'));

* 此代码会在组件首次渲染时，自动导入包含OtherComponent组件的包

* React.lazy接受一个函数，这个函数需要动态调用import()，它必须返回一个promise，该promise

* 需要resolve一个default export的组件

* Suspense 组件置于懒加载组件之上的任何位置。你甚至可以用一个 Suspense 组件包裹多个

* 懒加载组件

*

* ///file与http：在import的过程中需要http服务器去解析es6语法并添加header头信息去跨域

* 引入test.js，但是file协议相当于通过资源管理器静态访问index.html，中间的过程没有http

* 服务器参与解析，所以无法识别es6的import语法///

*

* 3.Context:提供了一个无需为每层组件手动添加props，就能在组件树间进行数据传递的方法

* context设计的目的是为了共享那些对于一个组件树而言是全局的数据

* 一种无需context的解决方案是将组件自身传递下去，因而中间组件无需知道等等props

* const context=React.createContext(defaultValue)；创建一个context对象，当react渲染一个

* 订阅了这个Context对象的组件，这个组件会从组件树中离自身最近的那个匹配的Provider中读取到当

* 前的context值只有当组件所处的树中没有匹配到provider时，defaultValue才会生效。

* **将undefined传递给Provider的value时，消费组件的defaultValue不会生效**

* context.Provider:每个Context对象都会返回一个Provider React组件，它允许

* 消费组件订阅context的变化。

* 一个Provider可以和多个消费组件有对应关系，多个Provider也可以嵌套使用，里层的会覆盖外层的数据

* 当Provider的value值发生变化时，它内部的所有消费组件都会重新渲染。Provider及其内部consumer

* 组件都不受制于shouldComponentUpdate函数，因此当consumer组件在其祖先组件退出更新的情况下

* 也能更新。

* Class.contextType:挂载在class上的contextType属性会被重赋值为一个由React.creatContext()创建

* 的Context对象，这能让你使用this.context来消费最近Context上的那个值，可以在任何生命周期中访问

* 到它，包括render函数中。

* Context.Consumer:函数作为子元素，这个函数接收当前的context值，返回一个React节点

* Context.displayName:React DevTools使用该字符串来确定context要显示的内容

* 注意事项：因为context会使用参考标识来决定何时进行渲染，当provider的父组件进行重新

* 渲染时，可能会在consumer组件中触发意外的渲染。例如：每一次Provider重渲染时，以下的代码

* 会重新渲染所有下面的consumer组件，因为value属性总是被赋值为新的对象

* 为了防止这种情况，将value状态提升到父节点的state里

*

* 4.错误边界:是一种React组件，这种组件可以捕获并打印发生在其子组件树任何位置的js错误，

* 并且，它会渲染出备用UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期

* 方法和整个组件树的构造函数中捕获错误。

* 错误边界无法捕获以下场景中产生的错误：事件处理、异步代码、服务端渲染、它自身抛出的错误

* 错误边界的工作方式类似于js的catch{},但是错误边界只针对React组件，只有class组件才可以

* 成为错误边界。

* 注意错误边界仅可以捕获其子组件的错误，无法捕获自身的错误。如果一个错误边界无法渲染错误信息

* 则错误会冒泡至最近的上层错误边界。

* 未捕获错误的新行为：自React16起，任何未被错误边界捕获的错误将会导致整个React组件树被卸载

* 事件处理器不会在渲染期间触发，因此如果它们抛出异常，React仍然能够知道需要在屏幕上显示什么，

* 如果你需要在事件处理器内部捕获错误，使用普通的js try/catch语句

* 使用static getDerivedStateFromError()渲染备用UI，使用componentDidCatch()打印错误信息

*

* 5.Refs转发：是一项将ref自动地通过组件传递到其一组件的技巧

*

*

*

*

*

*

*

*

*/