第一步,升至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 发布官方文档
1、重命名 Unsafe 的生命周期方法
- componentWillMount → UNSAFE_componentWillMount
- componentWillReceiveProps → UNSAFE_componentWillReceiveProps
- componentWillUpdate → UNSAFE_componentWillUpdate
2、废弃 javascript: 形式的 URL
如使用<a href="javascript:;">操作</a>
不用a标签进行链接跳转的话,应该去掉href属性。
3、未能解决的问题
由于公司项目使用的技术栈包含了dva
,目前最新稳定版的dva2.4.1中的connect等方法中依旧使用了Unsafe生命周期,因此本地开发过程中,控制台会充满对Unsafe生命周期的黄色警告,这是个头痛的问题。
这个问题只能等dva更新了,或者将dva转为umi。
总结
这篇文章针对项目中React升级进行了总结,其实没什么太大的难点。终于可以使用Fragment
、Hook
、componentDidCatch
等一些新特性了,这有益于以后的开发体验。
项目的升级计划中,其实还包含了将dva升至2.4.1,antd2.x升至antd3.x查看文章。这些升级同样花费了不少时间,最终相对平滑地将项目升级上去了,想到以后能够美滋滋地敲代码的场景,这是非常值得的。