Hooks讓我們?yōu)橄嗤墓δ芫帉懜俚拇a。我們需要編寫的代碼越少，我們就可以越快地啟動(dòng)應(yīng)用程序。hooks需要在函數(shù)組件中使用。您不能在 React 類中使用 hooks。函數(shù)式的 React 組件更加現(xiàn)代，并支持有用的 hooks，現(xiàn)在流行把舊式的類組件轉(zhuǎn)換為函數(shù)式組件。這篇文章總結(jié)了轉(zhuǎn)換的一些通用的步驟和陷阱。

區(qū)別：

性能上的差異較小，取決于代碼是怎么寫的；
class 和 閉包的區(qū)別；
函數(shù)思想還是面向?qū)ο笏枷耄?br />需要做到邏輯清晰，低耦合，命名規(guī)范；
Hooks 會(huì)讓代碼結(jié)構(gòu)更簡單；
Hooks 在每次渲染或者更新都會(huì)創(chuàng)建一個(gè)函數(shù)執(zhí)行上下文,可以使用 useCallback、useMemo；
Hooks 添加的原因，以及后續(xù)對(duì) Hooks 的優(yōu)化等可以看出 Hooks 肯定是有優(yōu)于 class 的地方的；
函數(shù)組件中不能監(jiān)聽組件的生命周期，useEffect聚合了多個(gè)生命周期函數(shù)
class組件中生命周期較為復(fù)雜
class組件邏輯難以復(fù)用（HOC，render props）
函數(shù)組件業(yè)務(wù)代碼更加聚合，比如在class 組件中定時(shí)器的創(chuàng)建和銷毀分別在兩個(gè)不同的生命周期，但 函數(shù)組件只需寫在 useEffect 中即可。

性能對(duì)比：

差異較小，控制變量法。

步驟：

將class 類定義的React 元素轉(zhuǎn)換成 變量或者函數(shù)
class 中的 render 函數(shù) 直接去掉，直接return html 元素
將 state 變量使用 useState Hooks 替代
componentDidMount 生命周期使用 useEffect Hooks 替代
componentDidUpdate 生命周期使用 useEffect Hooks 替代
React memo 替代 PureComponent

通用替換

定義

從

class (\w+) extends Component \{

改為

const $1: FC = () => {

• 這是沒有 export 和 props 的場景

從

(export) default class (\w+) extends Component \{

改為

$1 const $2: FC<$2Props> = () => {

• 作為第二個(gè)捕捉的單詞，$2 就是組件名。
• $2Props 應(yīng)該定義為 props 的接口名。

Attributes 前綴

從

this\.(state\.|props\.)?

改為

• 假設(shè) props 被統(tǒng)一解構(gòu)。

生命周期函數(shù)

從

componentDidMount() { 

改為

useEffect(() => {}, []);

• componentDidUpdate 也可以被轉(zhuǎn)換為 useEffect，并設(shè)置合適的依賴。
• componentWillUnmount 可以轉(zhuǎn)換為對(duì)應(yīng) useEffect 處理函數(shù)的返回函數(shù)。

State 相關(guān)語句

從

state = {
  data: null,
};

改為

const [data, setData] = useState();

從

this.setState({
  data,
});

改為

setData(data)

類方法

從

^(\s*)(\w+)\((\w*)\) \{

改為

$1const $2 = ($3) => {

• 這屬于常規(guī)函數(shù)定義。
• $1 是空格, $2 是方法名, $3 是參數(shù).

從

^(\s*)((\w+) = (async )?\((\w+(, )?)*\) =>)

改為

$1const $2

• 這屬于箭頭函數(shù)定義。
• $1 是空格, $2 方法名之后的所有內(nèi)容

類 Getter

從

^(\s*)(get) (\w+)\(\)

改為

$1const $2\u$3 = () =>

• \u 表示對(duì)后面捕獲的單詞首字母大寫。
• 對(duì) getter 的調(diào)用應(yīng)該在方法名后加上 ()。
• 如果 getter 很簡單，可以直接賦值而不用使用函數(shù)。

渲染函數(shù)

從

render() {
  return (
    <></>
  );
}

改為

return (
  <></>
);

值得關(guān)注的陷阱

命名沖突

類組件可以具有同名的 attributes 和 props，例如 this.data 和 this.props.data。
當(dāng) this.data 變?yōu)?nbsp;data，另外 props 經(jīng)常被解構(gòu)為 const {data} = props，命名沖突 就產(chǎn)生了。

State 回調(diào)

通過 this.setState，我們可以設(shè)置一個(gè)回調(diào)，在 state 確實(shí)改變時(shí)進(jìn)行調(diào)用，但我們需要把這種方式更新為使用更新的 state 作為依賴的 useEffect。

函數(shù) State

如果 state 的值是函數(shù)，你需要把這個(gè)函數(shù)包裹在另一個(gè)匿名函數(shù)中，否則 hook 版本的 setState 會(huì)把這個(gè)函數(shù)視為回調(diào)。
實(shí)際上，在大多情況下，這種 state 是和渲染無關(guān)的，所以也許使用 useRef 更加合適。

這個(gè)文章展示了一些使用 RegExp 的替換，可以使類組件到函數(shù)式組件的替換簡單點(diǎn)，另外指出了一些在這個(gè)過程中你可能會(huì)遇到的陷阱，可以特別留意下，不過當(dāng)然，不同的場景會(huì)存在更多的工作要處理。

到此這篇關(guān)于React類組件轉(zhuǎn)換成函數(shù)式組件的文章就介紹到這了,更多相關(guān)React類組件轉(zhuǎn)換函數(shù)式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論