React15至今的重要变化人肉梳理

2016-04-07

• 当在挂载组件时使用document.createElement而不是innerHTML，这样我们就摆脱了data-reactid。并且document.createElement在现代浏览器中也更快；
  • 值得注意： data-reactid在client端已经去除了，但依旧存在在服务端渲染中，不过更小更简 单是简单递增的。
• 由于历史原因对SVG的不完整支持，在React 15中支持了所有被现代浏览器所支持的SVG属性；
• 社区（Michael Wiencek）的贡献使得React 15不再需要多余的对text进行包裹；
• 渲染Null现在使用comment nodes（注释节点）了；
• 函数式组件现在也能返回null了；
• 移除和弃用
  • 移除包括：findDOMNode，render，renderToSring，renderToStaticMarkup和unmountComponentAtNode几个顶级API，不过他们都能在ReactDom和ReactDomServer中找到；
  • 移除的插件：cloneWithProps和batchedUpdates
  • 移除的组件实例方法：setProps、replaceProps和getDOMNode
• 将在React 16移除：
  • LinkStateMixin和valueLink
  • 在未来的版本中React会对<input value={null}>理解为清除input而不是在React 0.14中忽略了value={null}。不过React 15会对此作出warning，所以最好用空字符串或者undefined来做同样的事
  • ReactPerf.printDOM()被更名为ReactPerf.printOperations()，同样ReactPerf.getMeasurementsSummaryMap()更名为ReactPerf.getWasted()
• 式

2016-04-08

• 移除React.__spread发生了问题，又放回来了，给予提示并将在以后移除（主要由于TypeScript和coffee-script都有使用），并推荐我们使用Object.assign来代替
• 修复了关于受控输入的光标位置的bug

2016-07-11

• 15.2.0的版本中，将error message从构建中剥离了出来，这样我们会在开发环境中看到一些错误信息并指向一个网址。（更详细的信息）

2016-07-13

不再建议使用Mixin，并针对几个case提出了解决方案，大致如下：

• 性能优化：React.PureComponent
• 多组件共享订阅和副作用函数：higher-order components
• util方法：用普通javaScript书写并import
• 关于ref forwarding的讨论
• 完整讨论

2016-07-22

• 发布了create-react-app

2016-08-05

• 再回顾Relay项目，具体看这里

2016-09-28

• 50，000 Stars的博客，回顾了React历史，感性的可以自己去看

2016-11-16

• React 15.4.0发布；
• 彻底分离React和React DOM，现在React中将只含有与渲染无关的代码例如：React.Component和React.createElement()
• React DOM Server包体积大小几乎与React相当，因为他有一份自己的React reconciler。不建议在client端使用React DOM Server
• React perf：在16中已不推荐使用，使用chrome的Performance Tab更佳，分析时记得关闭React DevTools并在development环境下使用
• 为Snapshot Testing做了一些支持，感兴趣的可以看原文

2017-04-07

• React 15.5.0发布；
• 对于即将到来的16.0和完全的重写React内部做铺垫；
• 拆分了React.PropTypes和React.createClass到独立的包中；
• React.PropTypes迁移到了prop-types包中,迁移指南；
• React.createClass迁移到create-react-class中，但由于ES2015对class的支持，React也开始使用原生的class来创建components；
• 此处也有提到React Addons，但已废弃，不做梳理

2017-05-18

• 主要讲了create react app的新动向，不做细讲，参考链接

2017-06-13

• React 15.6.0
• input的onChange事件优化

2017-07-26

• Error Boundaries: componentDidCatch。类似catch { }
• 配合使用babel-plugin-transform-react-jsx-source会在error stack报错误代码行数，不过记得只在development环境使用

2017-09-08

• React 16 对DOM属性的处理
• React 15中会对不认识的属性跳过，现在会将其直接渲染出来
• data-和aria-的属性将会任我们自定义

2017-09-25

• 常规更新和bugfix，参考链接

2017-09-26

• React 16.0发布
• 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)
• 预告了一个重要特性Fiber
• Breaking changes摘要：
  • setState(null)不再会引起更新、setState的callback将会在componentDidMount/componentDidUpdate后立即执行，而不是在所有components渲染后执行
  • <B />替换<A />时，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包来弥补

 import 'core-js/es6/map'
 import 'core-js/es6/set'
 import 'raf/polyfill' 

2017-11-28

• 发布React 16.2.0
• 主要引入了Fragments

2017-12-07

• 主要介绍了React的RFC进程，感兴趣贡献代码和idea的同学可以去看看

2017-12-15

• React引入了Rollup、Prettier和Google Closure Compiler，感兴趣的同学可以参考

2018-03-01

• 异步渲染的更新：Two Demos
  • time slicing、suspense
  • time slicing：
  • suspense:

2018-03-29

• 正式的Context API
• createRef API、forwardRef API
• forwardRef API
• 生命周期的变更
  • componentWillMount、componentWillReceiveProps、componentWillUpdate都不建议在使用并且在17中将会被冠上UNSAFE_的前缀；
  • 新增了getDerivedStateFromProps、getSnapshotBeforeUpdate两个生命周期，具体内容可以查看我的另一篇翻译博文
• Strict Mode，帮助我们发现潜在的问题
  • 使用UNSAFE_生命周期时警告
  • 使用findDOMNode时警告
  • 对意料之外的副作用作出警告（Fiber下部分周期可能会被调起两次）
  • 对即将移除的老context API作出警告

2018-05-23

• 支持了更多的pointer events：onPointerDown、onPointerMove…
• 修复了getDerivedStateFromProps总是被唤起的bug、应该是props改变时才会调用。不建议在此周期中做副作用操作(ajax)

2018-06-07

• 详细分析了getDerivedStateFromProps应该用在什么样的场景下
• getDerivedStateFromProps存在只有一个目的，让组件能够在props变更的情况下更新自己的state
• 对两个getDerivedStateFromProps的错误场景提出了解决方案：全受控组件和、全非受控组件带个key值（在key不同的时候重新渲染）
• 性能优化上是有memoization的memoize-one库来帮忙做优化

2018-08-01

• 16.4.2修复了一个关于服务端渲染的可能产生XSS攻击的bug

2018-09-10

• React 16.5.0以上在React Devtools新增了一个新功能Profiler，来帮助我们梳理React项目各组件的性能

2018-10-01

• Create React App 2.0发布了

2018-10-23

• React.memo 让Function组件用上PureComponent
• React.lazy配合Suspence和动态引入import(’’)来优化体验（例如loading状态）
• static contextType(没读懂)
• static getDerivedStateFromError()，这个方法可以让我们componentDidCatch发生错误时能够做一些兜底的UI，如果不做React会主动渲染成null

2018-11-13

• React大会：hooks介绍、并行渲染、基于React.lazy的代码拆分、新工具Profiler的使用、RN的新新闻

2018-11-27

• React 16.x的规划图
• Q1：React Hooks
• Q2：Concurrent 模式
• Q3：Suspense for Data Fetching
• Suspense目前并不能在服务端渲染使用（这是其他Project排期）

2018-12-19

• 修复了React.lazy的bug
• 其他bug fix

2019-02-06

• 发布了hooks

2019-02-23

• 多语言支持招募翻译