What's new in React16
- Error Boundaries
- Fragments / Strings
- Portals
- ReactDOMServer
- DOM Attributes
- Fiber
What's new in React16.2.0
Better support of Fragments
What's new in React16.3.0
- New Context API
- New life-cycle methods: getDerivedStateFromProps, UNSAFE(componentWillMount, componentWillReceiveProps, componentWillUpdate)
- StrictMode
unstable_AsyncMode
升级
React16.3 内容的变化相对较大, 特别是 Context 即将面临调整和新的组件生命周期函数将对整体架构和周边生态产生较大影响, 因此还是选用相比 React16 版本变化较小的 React16.2 作为升级版本
React 插件
React16 将停止对 React Addons 的维护和支持, 具体可以参照 discontinuing support for react addons https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#discontinuing-support-for-react-addons
注意的问题
React16 依赖于 es6 的 Map 和 Set, 引入 bable-polyfill 或抽离单独的 pollyfill(注意需要先于 react 进行加载)
不再支持 ES5 创建组件写法, 引入 create-react-class 可以进行兼容, 建议全面拥抱 ES6
React.PropTypes 废弃
- import React, {PropTypes} from 'react';
- //React16 之后
- import React from 'react';
- import PropTypes from 'prop-types';
ReactDOM.render() 和 React.unstable_renderSubtreeIntoContainer() 这两个方法在生命周期方法中执行是将会返回 null, 要解决这个问题, 可以借助 protals https://reactjs.org/docs/portals.html 或 https://reactjs.org/docs/refs-and-the-dom.html
componentDidUpdate 声明周期方法不再接受 prevContext 参数
其他细节
setState 的回调 (第二个参数) 现在会在 componentDidMount/componentDidUpdate 之后立即启动, 而不是在所有组件都渲染完成之后 组件实例化后的 type 属性将不再指向组件
- //item 为 Node 组件的实例
- item.type === Node //true
- //React16 之后
- item.type === Node //false
相关生态更新
react-hot-loader 4.0.0
- //react-hot-loader 的实现将更贴近函数式
- import { hot } from 'react-hot-loader';
- const App = () => <MainEntry />;
- export default hot(module)(App);
解决之前版本 SFC 函数无法热更新的问题
总结
相关来说从 React15.x 升级到 React16.2 并没有太大的挑战, 而在 React16.3 之后的版本将迎来更多变化, 以及周围生态的更新, 包括新生命周期函数及 New Context API, 每一个的变化都不可掉以轻心.
来源: https://juejin.im/post/5ad5add35188251e655b0ca0