React 16 新特性

来源：互联网发布：windows.iso怎样安装编辑：程序博客网时间：2024/06/06 19:31

2017年9月26日React 16发布，通过官网和示例了解一下新特性。

React 16更新

新js环境要求

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

新功能

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

Fragments

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

详见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    }}
```
创建一个简单的包含错误的子组件：
```
class ErrorComponent extends React.Component{    render(){        const str = '123';        return str.toFixed(2);    }}
```
使用错误边界组件包裹可能出错的组件
```
class MainShowComponent extends React.Component{    render(){        return (            <div>                <ErrorBoundary>                    <ErrorComponent/>                </ErrorBoundary>            </div>        )    }}
```
当被错误边界组件包裹的子组件中出现错误，会将错误组件替换为字符串：this or its children has error，而不会导致整体组件树被卸载。
Portals
Portals提供了一种一流的方法来将子代呈现到父组件的DOM层次结构之外的DOM节点。
```
ReactDOM.createPortal(  child,  container);
```
第一个参数（child）是任何可渲染的React子元素，如元素，字符串或片段。第二个参数（container）是一个DOM元素。
通常，当您从组件的render方法返回一个元素时，它将作为最近的父节点的子元素装载到DOM中：
```
render() {  // React mounts a new div and renders the children into it  return (    <div>      {this.props.children}    </div>  );}
```
但是，有时将子项插入到DOM中的其他位置会很有用：
```
render() {  // React does *not* create a new div. It renders the children into `divNode`.  // `divNode` is any valid DOM node, regardless of its location in the DOM.  return React.createPortal(    this.props.children,    divNode,  );}
```
有关Portals 和其事件冒泡详见官网和CodePen例子
custom DOM attributes
支持非标准的自定义DOM属性，在之前的版本中，React会忽略无法识别的HTML和SVG属性，自定义属性只能通过data-*形式添加，现在它会把这些属性直接传递给DOM，这个改动让React可以去掉属性白名单，从而减少了文件大小。但当DOM传递的自定义属性是函数类型或event handler类型时，也会被React忽略掉。
```
<div a={()=>{}}></div>   //错误
```
improved server-side rendering
提升服务端渲染性能，React 16的SSR被完全重写，新的实现非常快，接近3倍性能于React 15，现在提供一种流模式streaming，可以更快地把渲染的字节发送到客户端。

打破改变

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

阅读全文

0 0