1. React.PropTypes 被废弃

用‘prop-types’库

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

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

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

2.React.createClass 被废弃

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6.新增ReactDOM.createPortal方法

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

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

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

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

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

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

其他更新

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