React 版本更新记录

v16.3

v16.2

• 新增 Fragment

  提高了对子组件的渲染方法返回多个子元素的支持
  官方文档 Fragment

  render() {
    return (
      <>
        <ChildA />
        <ChildB />
        <ChildC />
      </>
    );
  }

• componentWillMount / componentWillUpdate / componentWillReceiveProps` 废弃倒计时

• 新增静态方法getDerivedStateFromProps替代componentWillReceiveProps

  它会生成一个新state，方便让你setState。所有生命周期钩子（除了构造器）的context传参都被无效了

• 新增 createContext()

  它会返回一个具有Provider和Consumer方法的对象

• 严格模式 StrictMode
  严格模式确保你的代码遵循最佳实践 就像原生 js 的 use strict

  render(){
      return (
          <StrictMode>
              <Context.Provider>
                  <Title/>
              </Context.Provider>
          </StrictMode>
      )
  }

• 异步组件AsyncMode
  尚未全面支持

v16.0 变动

• 新核心架构Fiber

• React.PropTypes 废弃

  使用prop-types库代替

• React.createClass 废弃

  官方推荐使用 ES6class方式创建组件

• render可返回数组 或 字符串

  render() {
      return [
          <div key='1'>1</div>,
          <div key='2'>2</div>,
          <div key='3'>3</div>,
      ];
  }
  // 注：不要忘了加key
  // 也可以直接返回字符串
  render() {
      return 'Hello World';
  }

• 新的生命周期 componentDidCatch

  错误处理机制，如同try…catch
  可以用于捕获子组件的错误，即使子组件有代码报错，也不至于导致整个 APP 崩溃

• 接受元素上的自定义属性

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

• 新增ReactDOM.createPortal方法

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

• 其他

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