顏值不夠，實力來湊。但仔細想想，好像實力也不太行，心中頓生傷感，不說了，學習去。

第一步，升至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。這些升級同樣花費了不少時間，最終相對平滑地將專案升級上去了，想到以後能夠美滋滋地敲程式碼的場景，這是非常值得的。