React 版本更新记录

v16.3

v16.2

  • 新增 Fragment

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

    render() {
      return (
        <>
          <ChildA />
          <ChildB />
          <ChildC />
        </>
      );
    }
  • componentWillMount / componentWillUpdate / componentWillReceiveProps` 废弃倒计时

  • 新增静态方法getDerivedStateFromProps替代componentWillReceiveProps

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

  • 新增 createContext()

    它会返回一个具有ProviderConsumer方法的对象

  • 严格模式 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

  • 其他

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


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!