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。這些升級一樣花費了很多時間，最終相對平滑地將項目升級上去了，想到之後可以美滋滋地敲代碼的場景，這是很是值得的。