react 14升16.8 二期总结

以下总结摘自：

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