函數(shù)式的 React 組件更加現(xiàn)代，并支持有用的 hooks，現(xiàn)在流行把舊式的類組件轉(zhuǎn)換為函數(shù)式組件。這篇文章總結(jié)了轉(zhuǎn)換的一些通用的步驟和陷阱。

通用替換

定義

從

class (\w+) extends Component \{

改為

const $1: FC = () => {

• 這是沒(méi)有 export 和 props 的場(chǎng)景

從

(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)語(yǔ)句

從

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 很簡(jiǎn)單，可以直接賦值而不用使用函數(shù)。

渲染函數(shù)

從

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

改為

return (
  <></>
);

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

命名沖突

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

State 回調(diào)

通過(guò) 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 是和渲染無(wú)關(guān)的，所以也許使用 useRef 更加合適。

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

總結(jié)

以上是生活随笔為你收集整理的React 类组件转换为函数式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。