React 16更新

新js环境要求

react16依靠Map和Set集合和requestAnimationFrame（一个针对动画效果的API）

Copier après la connexion

新功能

- Fragments：render函数可以返回数组和字符串
- error boundaries：错误处理
- portals ：支持声明性地将子树渲染到另一个DOM节点
- custom DOM attributes ：ReactDom允许传递非标准属性
- improved server-side rendering:提升服务端渲染性能

Copier après la connexion

Fragments

render() {
  return [
    <li key="A"/>First item</li>,
    <li key="B"/>Second item</li>,
    <li key="C"/>Third item</li>,
  ];
}

Copier après la connexion

详见API

error boundaries

之前，一旦某个组件发生错误，整个组件树将会从根节点被unmount下来。React 16修复了这一点，引入了Error Boundary的概念，中文译为“错误边界”，当某个组件发生错误时，我们可以通过Error Boundary捕获到错误并对错误做优雅处理，如使用Error Boundary提供的内容替代错误组件。Error Boundary可以看作是一种特殊的React组件，新增了componentDidCatch这个生命周期函数，它可以捕获自身及子树上的错误并对错误做优雅处理，包括上报错误日志、展示出错提示，而不是卸载整个组件树。（注：它并不能捕获runtime所有的错误，比如组件回调事件里的错误，可以把它想象成传统的try-catch语句）

实践：

抽象出检查错误边界公共组件：
```
class ErrorBoundary extends React.Component{
    constructor(props){
        super(props);
        this.state=({
            ifError:false
        });
    }

    componentDidCatch(err, info) {
        this.setState({ ifError: true })
        console.log(err);
    }

    render(){
        if(this.state.ifError){
            return `this or its children has error`;
        }
        return this.props.children
    }
}
```
Copier après la connexion
创建一个简单的包含错误的子组件：
```
class ErrorComponent extends React.Component{
    render(){
        const str = '123';
        return str.toFixed(2);
    }
}
```
Copier après la connexion
使用错误边界组件包裹可能出错的组件
```
class MainShowComponent extends React.Component{
    render(){
        return (
            
                <ErrorBoundary>
                    <ErrorComponent/>
                </ErrorBoundary>
            
        )
    }
}
```
Copier après la connexion
当被错误边界组件包裹的子组件中出现错误，会将错误组件替换为字符串：this or its children has error，而不会导致整体组件树被卸载。（想看更多就到PHP中文网React参考手册栏目中学习）
Portals

Portals提供了一种一流的方法来将子代呈现到父组件的DOM层次结构之外的DOM节点。
```
ReactDOM.createPortal(
  child,
  container
);
```
Copier après la connexion
第一个参数（child）是任何可渲染的React子元素，如元素，字符串或片段。第二个参数（container）是一个DOM元素。

通常，当您从组件的render方法返回一个元素时，它将作为最近的父节点的子元素装载到DOM中：
```
render() {
  // React mounts a new p and renders the children into it
  return (
    
      {this.props.children}
    
  );
}
```
Copier après la connexion
但是，有时将子项插入到DOM中的其他位置会很有用：
```
render() {
  // React does *not* create a new p. It renders the children into `pNode`.
  // `pNode` is any valid DOM node, regardless of its location in the DOM.
  return React.createPortal(
    this.props.children,
    pNode,
  );
}
```
Copier après la connexion
有关Portals 和其事件冒泡详见官网和CodePen例子
custom DOM attributes

支持非标准的自定义DOM属性，在之前的版本中，React会忽略无法识别的HTML和SVG属性，自定义属性只能通过data-*形式添加，现在它会把这些属性直接传递给DOM，这个改动让React可以去掉属性白名单，从而减少了文件大小。但当DOM传递的自定义属性是函数类型或event handler类型时，也会被React忽略掉。
```
{}}>   //错误
```
Copier après la connexion
improved server-side rendering

提升服务端渲染性能，React 16的SSR被完全重写，新的实现非常快，接近3倍性能于React 15，现在提供一种流模式streaming，可以更快地把渲染的字节发送到客户端。

打破改变

调度和生命周期的改变

调用setState返回null将不会更新render，这样可以让你在更新方法中自己决定是否更新。

this.setState(
    (state)=>{
        if(state.curCount%2 === 0){
            return {curCount:state.curCount+1}
        }else{
            return null;
        }

    }
)

Copier après la connexion

在render方法中调用setState总是会导致更新，之前版本不支持，但尽量不要在render中调用setState。

setState的回调函数会在componentDidMount/ componentDidUpdate 执行之后立即执行，而不是在所有组件渲染之后。

    this.setState(
        (state)=>{
            if(state.curCount%2 === 0){
                return {curCount:state.curCount+1}
            }else{
                return null;
            }

        },
        ()=>{
            console.log(this.state.curCount);
        }
    )

Copier après la connexion

ReactDOM.render()和ReactDom.unstable_renderIntoContainer()如果在生命周期函数中调用将会返回null。所以解决此类问题可以使用portals或者refs
setState的改变：
当两个组件<A /> 和 发生替换时，B.componentWillMount总是会在A.componentWillUnmount之前执行，而在之前，A.componentWillUnmount有可能会提前执行。
之前版本，当改变一个组件的ref时，ref和dom会在组件的render方法被调用之前分离。现在，我们延迟了ref的改变，直到dom元素被改变了，ref才会和dom分离。
对于不使用React而是使用其他方法来重新渲染容器是不安全的。这在以前的版本中也许会生效，但是我们觉得不支持这样做。现在对于这种情况我们会发出一个警告，而且你需要使用ReactDOM.unmountComponentAtNode来清空你的节点树。
```
ReactDOM.render(<App />, p);
p.innerHTML = 'nope';
ReactDOM.render(<App />, p);//渲染一些没有被正确清理的东西
```
Copier après la connexion
而你需要：
```
ReactDOM.render(<App />, p);
ReactDOM.unmountComponentAtNode(p);
p.innerHTML = 'nope';
ReactDOM.render(<App />, p); // Now it's okay
```
Copier après la connexion
查看此issue
componentDidUpdate生命周期不再接受prevContext参数。
使用不唯一的key可能会导致子组件的复制或者遗失，使用不唯一的key并不支持，并且也从未支持，但之前这是一个硬性错误。
Shallow renderer（浅层渲染）不再触发componentDidUpdate()，因为DOM的refs是不可用的。这也使得它与componentDidMount()之前版本中的调用一致。
Shallow renderer不再支持unstable_batchedUpdates()。
ReactDOM.unstable_batchedUpdates 现在回调之后只有一个额外的参数。

单文件浏览器版本的名称和路径已经改变，以强调开发和生产版本之间的差异

react/dist/react.js → react/umd/react.development.js
react/dist/react.min.js → react/umd/react.production.min.js
react-dom/dist/react-dom.js → react-dom/umd/react-dom.development.js
react-dom/dist/react-dom.min.js → react-dom/umd/react-dom.production.min.js

重写并改进服务器渲染器

服务器渲染不再使用标记验证，而是尽力附加到现有的DOM，警告不一致。它也不再使用每个节点上的空白组件和数据反馈属性的注释。
为服务器渲染容器现在有一个明确的API。使用ReactDOM.hydrate而不是ReactDOM.render如果你正在恢复服务器呈现的HTML。继续使用，ReactDOM.render如果你只是做客户端渲染。

当未知的属性传递给DOM组件时，如果是有效的值，React会渲染进DOM。查看文档

在render和生命周期函数中的错误默认会卸载整个DOM树，为了阻止这个，可以在UI的相应位置添加错误边界。

弃用

不再构建react-with-addons.js，所有兼容的插件都是在npm上单独发布的，如果你需要它们，可以使用单文件浏览器版本。
在15.x版本中的弃用已经从核心包中删除，React.createClass现在可以作为 create-react-class，React.PropTypes可以作为prop-types，React.DOM 作为 react-dom-factories，react-addons-test-utils 作为 react-dom/test-utils使用， shallow renderer 作为 react-test-renderer/shallow使用。参阅15.5.0和15.6.0文档参考。

本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!