总结了一些负责项目升级点

以下总结摘自：

React16 版本更新的新特性
React v15 到 v16.3, v16.4 新生命周期总结以及使用场景
【ReactJS】V0.14 版本前后的变化
react14 到 15 版本主要变更
React15 至今的重要变化人肉梳理

总结如下：

  • react 14 到 15

    • 当在挂载组件时使用 document.createElement 而不是 innerHTML，这样我们就摆脱了 data-reactid。并且 document.createElement 在现代浏览器中也更快；
      值得注意： data-reactid 在 client 端已经去除了，但依旧存在在服务端渲染中，不过更小更简 单是简单递增的。
    • 由于历史原因对 SVG 的不完整支持，在 React 15 中支持了所有被现代浏览器所支持的 SVG 属性；
    • 社区（Michael Wiencek）的贡献使得 React 15 不再需要多余的对 text 进行包裹；
    • 渲染 Null 现在使用 comment nodes（注释节点）了；
    • 函数式组件现在也能返回 null 了；
    • 移除和弃用
      • 移除包括：
        indDOMNode，render，renderToSring，renderToStaticMarkup 和 unmountComponentAtNode几个顶级 API，不过他们都能在ReactDom 和 ReactDomServer中找到；
      • 移除的插件： cloneWithProps 和 batchedUpdates
      • 移除的组件实例方法：setProps、replaceProps 和 getDOMNode

  • react 15 的一些重大变化

    • 彻底分离React 和 React DOM，现在 React 中将只含有与渲染无关的代码例如：React.Component 和 React.createElement()
    • React DOM Server 包体积大小几乎与 React 相当，因为他有一份自己的 React reconciler。不建议在 client 端使用 React DOM Server
    • 拆分了 React.PropTypes 和 React.createClass 到独立的包中；
    • React.PropTypes 迁移到了 prop-types 包中,迁移指南；
    • React.createClass 迁移到 create-react-class 中，但由于 ES2015 对 class 的支持，React 也开始使用原生的 class 来创建 components；
    • data-和 aria-的属性将会任我们自定义

  • react 16 的一些重大变化

    • NEW FEATURE：fragments、error boundaries(已经介绍过不做赘述)、portals
    • NEW SUPPORT：custom DOM attributes
    • IMPROVEMENT：server-side rendering
    • render 函数能 return：React elements、Array 和fragments、Portals、Booleans or null、String and numbers
    • portals是由 React DOM 提供的方法 createPortal(child, container)所创建出来的，能够让元素脱离于 React Tree 在 DOM Tree 的其他地方出现，但事件冒泡依旧是遵循 React DOM tree 的。这个方法可以用来实现 Modal、dialog、tooltips 等。
    • 更好的服务端渲染：支持流式的传输、三倍快与 React 15 的渲染速度。值得注意的是，React 16 hydrate 工作在 client 端时会使用已经在服务端渲染好的 DOM 结构，而不会做细致检查，只会在 Client 端提示你数据不统一，并且也不建议在 server 端渲染和 client 端 hydrate 时数据不同
    • 降低了包大小：react 5.3kb(2.2kb gzipped)、react-dom 103.7kb(32.6kb gzipped)
    • Breaking changes 摘要：
      • setState(null)不再会引起更新、setState 的 callback 将会在 componentDidMount/componentDidUpdate 后立即执行，而不是在所有 components 渲染后执行
      • 替换时，B 的 componentWillMount 总会发生在 A 的 componentWIllUnmount 之前
      • shallow renderer 不会再出发 componentDidUpdate 因为 DOM refs 是拿不到的，并与 componentDidMount 表现一致
      • 功能剥离：React.PropTypes => prop-types、React.Dom => react-dom-factories、react-addons-test-utils => react-dom/test-utils、shallow renderer => react-test-renderer/shallow
    • React 16 依赖于 Map 和 Set，如果要支持老旧浏览器和设备，应该引入全局的 polyfill，例如 core-js 和 babel-polyfill，同样也依赖于 requestAnimationFrame，可以用 raf 包来弥补
    • 异步渲染的更新：Two Demos
      • ime slicing、suspense
    • 正式的Context API
    • createRef API、forwardRef API
    • 生命周期的变更，可参看【译】React16.3+ 生命周期
      • componentWillMount、componentWillReceiveProps、componentWillUpdate 都不建议在使用并且在 17 中将会被冠上 UNSAFE_的前缀；
      • 新增了 getDerivedStateFromProps、getSnapshotBeforeUpdate 两个生命周期
    • React 16.5.0 以上在 React Devtools 新增了一个新功能 Profiler，来帮助我们梳理 React 项目各组件的性能
    • React.memo 让 Function 组件用上 PureComponent
    • React.lazy 配合 Suspence 和动态引入 import(’’)来优化体验（例如 loading 状态）
    • static contextType
    • hooks

参考学习