react16.0.0更新内容

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/running_shuai/article/details/80644217

1、废弃React.PropTypes

 使用的时候选择用‘prop-types’库

npm install 'prop-types' --save
import PropTypes from 'prop-types';
组建声明子组件接受父组建propTypes类型·
 let PropTypes = React.PropTypes
 PropTypes.array,    // 数组类型
 PropTypes.bool,      // 布尔类型
 PropTypes.func,      // 函数类型
 PropTypes.number,  // 数值类型
 PropTypes.object,  // 对象类型
 PropTypes.string,  // 字符串类型
 PropTypes.symbol,  // 唯一数类型
 PropTypes.node,      // 所有节点类型
 PropTypes.element,// 仅HTML元素节点类型
 PropTypes.any,      // 任意类型
 }

2、废弃React.createClass

随着React的发展，React.createClass形式自身的问题暴露出来：
1、React.createClass创建的组件，其每一个成员函数的this都有React自动绑定，  
   任何时候使用，直接使用this.method即可，函数中的this会被正确设置，  
   导致不必要的性能开销。React.Component创建的组件，其成员函数不会自动绑定this，  
   需要开发者手动绑定，否则this不能获取当前组件实例对象。

React.createClass是react刚开始推荐的创建组件的方式，这是ES5的原生的JavaScript来实现的React组件

var App = React.createClass({
    getInitialState: function() {//组件相关的状态对象
        return {
            text: ''
        };
    },
    render: function() {
        return (
            <div>

            </div>
        );
    }
});

ES6 class 的方式创建组件

    class App extends React.Component{
        constructor(props){
            super(props);
            this.state = {}
        }
        render(){
            return (
                <div></div>
            )
        }
    }

无状态函数式组件

无状态函数组件的优点：
1、代码的可读性更好，并且减少了大量冗余的代码，精简至只有一个render方法。
2、组件不会被实例化，整体渲染性能得到提升，因为组件被精简成一个render方法的函数来实  
   现的，由于是无状态组件，所以无状态组件就不会在有组件实例化的过程，无实例化过程，  
   就不需要维护react的完整声明周期也就不需要分配多余的内存。
3、组件不能访问this对象，无状态组件由于没有实例化过程。能访问的这个this是他的上下  
   文，也就是他的环境。
4、组件无法访问生命周期的方法，因为无状态组件是不需要组件生命周期管理和状态管理，所  
    以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参  
    与组件的各个生命周期管理的
5、无状态组件只能访问输入的props。
   无状态组件被鼓励在大型项目中尽可能以简单的写法来分割原本庞大的组件，未来React也  
   会这种面向无状态组件在譬如无意义的检查和内存分配领域进行一系列优化，所以只要有可 
   能，尽量使用无状态组件。

function App(props) {
  return <div>Hello {props.name}</div>
}
ReactDOM.render(<App name="lv" />,getElementById('#app')) 

3、新的生命周期函数：componentDidCatch

 16.0.0以前react在渲染过程中或者是生命周期内出现了catch到的错误，react会从根组件  
  上把这个组件树都卸载下来，以防止展现错误的数据，新增了componentDidCatch这个生  
  命周期函数，它可以捕获自身及子树上的错误并对错误做优雅处理，包括上报错误日志、展示  
  出错提示，而不是卸载整个组件树。
  组件加载完毕以后所catch到的错误err

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  componentDidCatch(error, info) {

        console.log('捕获到了错误：', error, info);
    }

  render() {
    return (
      <div>

      </div>
    );
  }
}

4、新增ReactDOM.createPortal方法

比如我们一个通用的子组件。loadding组件。需要挂载在每一个页面上，如果在每一个页面，  
上都加这个子组件。太麻烦，所以使用ReactDom.createPortal(<App/>,   
document.getElementById('div'))

// 子组件<Header />:
import React from 'react';
import ReactDom from 'react-dom';

class App extends React.Component{
    render() {
    // 用createPortal方法将自身的内容渲染到id='div1'的元素下
    return ReactDom.createPortal(
        <App/>,
        document.getElementById('div1'),
    );
}
}

5、setState传入null时不会再触发更新

 16.0.0之前的setState不管传入什么只要调用了这么方法就会渲染，更新以后
 this.setState({visibity})visibity为null不会触发更新，展示错误。

5、服务端渲染优化，比以前更好

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

6、react和react-dom库文件大小比以前更小

7、react开源协议为MIT协议