React从15.x升至16.13.1

颜值不够，实力来凑。但仔细想一想，好像实力也不太行，心中顿生伤感，不说了，学习去。

第一步，升至React16.2.0

1. React16废弃点

1.1 React.createClass

解决方案：npm install create-react-class

import createReactClass from 'create-react-class';
const Greeting = createReactClass({
	// ...
})
复制代码

查看官方文档

1.2 React.PropTypes

PropTypes包已从React中独立出来了

// import { PropTypes } from 'React' 已废弃
import PropTypes from 'prop-types';
复制代码

2. 小改动点

2.1 className属性必须传入string

以前一些代码，因为使用短路运算，因此className可能会接受到Boolean值。这时，React是会提示红色警告。

let bool= false;
return <div className={bool || 'class'}></div>
复制代码

改成三元判断式

let bool= false;
return <div className={bool ? 'class' : ''}></div>
复制代码

2.2 class类的get方法中调用ReactDom.findDOMNode报错

有一些旧代码，在get方法中使用ReactDom.findDOMNode获取节点来计算宽高属性，达到动态变化的效果。React版本升级后会报错。官方建议将ReactDom.findDOMNode放在componentDidUpdate或componentDidMount中。

事实上，ref能够获取真实节点，能够彻底避免使用findDomNode官方文档

3. React准备舍弃，尽可能不用的api

3.1 生命周期componentWillMount、componentWillReceiveProps、componentWillUpdate

React官方是打算在React17.x的时候废弃这些生命周期，尽可能不去用。

3.2 ref=字符串 这种方式获取节点

例如 ref="textInput"。而后经过 this.refs.textInput 来访问 DOM 节点。将来将会废弃这种方式。React官方建议用回调函数或 createRef API 的方式代替 官方文档

最初是看到这篇文章，以及参考官方文章将React升至16.2.0就好，一步一步来。按前端前辈的话来讲，怕步子迈大了，容易扯蛋。

第二步，升至React16.13.1

为了使用Hook，以及享受更好的React，最终选择一步到位，安装至最新React 参考React v16.9.0 发布官方文档

一、重命名 Unsafe 的生命周期方法

• componentWillMount → UNSAFE_componentWillMount
• componentWillReceiveProps → UNSAFE_componentWillReceiveProps
• componentWillUpdate → UNSAFE_componentWillUpdate

二、废弃 javascript: 形式的 URL

如使用<a href="javascript:;">操做</a> 不用a标签进行连接跳转的话，应该去掉href属性。

三、未能解决的问题

因为公司项目使用的技术栈包含了dva，目前最新稳定版的dva2.4.1中的connect等方法中依旧使用了Unsafe生命周期，所以本地开发过程当中，控制台会充满对Unsafe生命周期的黄色警告，这是个头痛的问题。 这个问题只能等dva更新了，或者将dva转为umi。

总结

这篇文章针对项目中React升级进行了总结，其实没什么太大的难点。终于可使用Fragment、Hook、componentDidCatch等一些新特性了，这有益于之后的开发体验。 项目的升级计划中，其实还包含了将dva升至2.4.1，antd2.x升至antd3.x。这些升级一样花费了很多时间，最终相对平滑地将项目升级上去了，想到之后可以美滋滋地敲代码的场景，这是很是值得的。