React15至今的重要变化人肉梳理_react15新特性-优快云博客

这篇博客梳理了React从15版本到16版本的重要变化，包括：移除data-reactid，完善SVG支持，函数式组件返回null，React.PropTypes和React.createClass的拆分，Error Boundaries的引入，以及Fiber、Hooks等新特性的添加。同时提到了社区的贡献，如create-react-app和React Perf的改进。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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