React v16 新特性介绍-白红宇

新特性快速了解

随着React版本的更新，在v16(16.0-16.3)主要更新的新功能有下面几点：

fragments (返回片段类型)：

//不需要再把所有的元素绑定到一个单独的元素中了render() {  return [    // 别忘记加上key值    first item
,    second item
,    third item
  ];}复制代码

error boundaries（处理错误）

v16 使用了一个更有弹性的错误处理策略。默认情况下，如果一个错误是在组件的渲染或者生命周期方法中被抛出，整个组件结构就会从根节点中卸载。这种方式阻碍了被坏数据的展示，然而，却不是很好的用户体验。

对于这种问题，你可以使用errorboundaries（错误边缘）来进行处理，它是专门用来抓取其下子组件错误并展示错误信息的组件。类似于try{}catch(){}语句。

写法可以参考这里

portals (挂载方式)

render() {  // React does *not* create a new div. It renders the children into `domNode`.  // `domNode` is any valid DOM node, regardless of its location in the DOM.  return ReactDOM.createPortal(    this.props.children,    domNode,  );}复制代码

custom DOM attributes （支持自定义DOM属性）

improved server-side rendering (提升服务端渲染性能)

reduced file size (减少文件大小)

新的生命周期方法

几个特定的新的声明周期方法会被引入，而旧的会被废弃。

componentWillMount--使用componentDidMount代替
componentWillUpdate--使用componentDidUpdate代替 componentWillReceiveProps--使用一个新的方法：static getDerivedStateFromProps来代替。
```
static getDerivedStateFromProps(nextProps, prevState) {  if(nextProps.currentRow === prevState.lastRow) {    return null;  }   return {    lastRow: nextProps.currentRow,    isCrollingDown: nextProps.curentRow > prevState.lastRow  }}复制代码
```
这几个旧的生命周期仍然可以用到React 16.4。在React 17里将被彻底移除。

新的Context API

新特性重点- new context API

Context API —— 本来它是一个官方推出的、文档化的 API，但开发者们又提醒我们尽量不要用这个 API，因为这个 API 还没完全确定下来，以后可能会再作修改，而且文档尚不完备。不过，作为可以替代 Redux 和 MobX的方法，其表现可圈可点。

React.createContext 方法用于创建一个 Context 对象。该对象包含 Provider 和 Consumer 两个属性，分别为两个 React 组件。

Provider 组件。用在组件树中更外层的位置。它接受一个名为 value 的 prop，其值可以是任何 JavaScript 中的数据类型。

Consumer 组件。可以在 Provider 组件内部的任何一层使用。它接收一个名为 children 值为一个函数的 prop。这个函数的参数是 Provider 组件接收的那个 value prop 的值，返回值是一个 React 元素（一段 JSX 代码)

具体代码实现如下：

const InfoContext = React.createContext({        id: 7788,        name: 'circe'      });      export default class App extends React.Component {        constructor(props) {          super(props)          this.state = {            profile: {              id: 233333,              name: 'Anderson'            }          }        }        render() {          return (            
                  
                 
              )        }      }            const Wrapper = props => {        return  
          }            const Detail = props => {        return 
          }            const NameShow = props => {        return 
    
               {            context => (              
                     
      id: {context.id}
                
      name: {context.name}
              
     
            )          }        
          }复制代码

界面显示：

id: 233333

name: Anderson

可以看到，对比之前数据层层传递的写法，明显写法简洁了很多。

使用时要注意：

React.createContext 方法接收一个默认值作为参数。当 Consumer 外层没有对应的 Provider 时就会使用该默认值。

Provider 和 Consumer 必须来自同一次 React.createContext 调用。也就是说 NameContext.Provider 和 AgeContext.Consumer 是无法搭配使用的

Provider 组件的 value prop 值发生变更时，其内部组件树中对应的 Consumer 组件会接收到新值并重新执行 children 函数。此过程不受 shouldComponentUpdete 方法的影响。

参考文档：