React 16.0.0 更新的内容 不废话

1. React.PropTypes 被废弃

用‘prop-types’库

// 引入库
npm install 'prop-types' --save

// 组件中使用：
import PropTypes from 'prop-types';

myComponent.propTypes = {
    optionalArray: PropTypes.array,    // 数组类型
    optionalBool: PropTypes.bool,      // 布尔类型
    optionalFunc: PropTypes.func,      // 函数类型
    optionalNumber: PropTypes.number,  // 数值类型
    optionalObject: PropTypes.object,  // 对象类型
    optionalString: PropTypes.string,  // 字符串类型
    optionalSymbol: PropTypes.symbol,  // 唯一数类型
    optionalNode: PropTypes.node,      // 所有节点类型
    optionalElement: PropTypes.element,// 仅HTML元素节点类型
    optionalArray: PropTypes.any,      // 任意类型
 }

2.React.createClass 被废弃

官方推荐都用ES6 class 的方式创建组件

class myComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }
    render() {
        return ...
    }
}

3. render可返回数组 或 字符串

render() {
    return [
        <div key='1'>1</div>,
        <div key='2'>2</div>,
        <div key='3'>3</div>,
    ];
}
// 注：不要忘了加key

// 也可以直接返回字符串
render() {
    return 'Hello World';
}

4.新的生命周期函数：componentDidCatch

错误处理机制，如同try…catch
可以用于捕获子组件的错误，即使子组件有代码报错，也不至于导致整个APP崩溃
官方文档：https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html

// 假如有一个子组件Header：
class header extends React.Component {
    ...
    render() {
        throw new Error('错误'); // 故意抛出一个错误
        return ...
    }
}

// 父组件中引用该组件，并配置componentDidCatch:

class myComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        error: false,
    };
  }

    // 这里配置了错误捕捉钩子函数
    componentDidCatch(error, info) {
        this.setState({
            error: true,
        });
        console.log('捕获到了错误：', error, info);
    }

  render() {
    return (
      <div>
          // 如果出错就用其他内容代替原组件
          {this.state.error ? <p>子组件出错</p> : <Header />}
      </div>
    );
  }
}

5. 接受元素上的自定义属性

<p abc='123'>
// 以前react会忽略abc属性（因为p元素没有abc这个属性），并在控制台抛出一个错误
// 现在会正确的把abc赋加在p标签上

6.新增ReactDOM.createPortal方法

以前一个组件只能被默认的渲染到父级所引用它的地方，
createPortal方法可以把组件自身的内容渲染到任意一个指定的dom元素下
但事件的冒泡仍然会从它原本的父级传递
官方文档：https://reactjs.org/docs/portals.html

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

...
render() {
    // 用createPortal方法将自身的内容渲染到id='div1'的元素下
    return ReactDom.createPortal(
        <div>Hello World!</div>,
        document.getElementById('div1'),
    );
}

// 父组件
class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false,
        };
    }

    onTest() {
      this.setState({
          show: true
      });
    }

  render() {
    return (
      <div>
          // 这里有一个id='div1'的元素
          <div id="div1"/>
          <hr />
          {this.state.show ? <Header /> : null}
          // 当点击时就会渲染Header,而Header的内容会出现在div1中
          <button onClick={() => this.onTest()}>测试</button>
      </div>
    );
  }
}

其他更新

1. 服务端渲染优化，比以前更好
2. react和react-dom库文件大小比以前更小
3. react开源协议为MIT协议