某天下午，當(dāng)我正專注于 “搬磚??” 時(shí)，同事 “小A” 給我秀了一段他剛寫(xiě)的前端組件代碼，看完后心里暗自到：這是前端框架又整新活了？

代碼如下所示：

hook useCounter(initial: number) {
  const [count, setCount] = React.useState(0);
  const incrementCount = () => {
    setCount(count => count + 1);
  }
  return [count, incrementCount];
}

component App() {
  const [count, increment] = useCounter(0);
  return <button onClick={() => increment()}>count is {count}</button>;
}

同事告訴我這是 React 代碼，當(dāng)時(shí)就直呼 “秀” 啊。

于是上網(wǎng)搜索了一番，哦，原來(lái)是 Facebook（現(xiàn)在已改名為 Meta）整的活！

Facebook 原先有一個(gè)自己的類型語(yǔ)言 Flow，和現(xiàn)在使用廣泛的 TS 差不多，都屬于 JavaScript 的超集。

上面同事 “小A” 給我秀的那段代碼，其實(shí)是 Facebook 為 Flow 語(yǔ)言添加了對(duì) React 組件、hook 等這些概念的改進(jìn)，有個(gè)專有名詞叫 “組件語(yǔ)法（Component Syntax）”。按照他們的意思來(lái)講，這些功能是真的好，例如：“提供了改進(jìn)的人機(jī)交互、表現(xiàn)力和靜態(tài)強(qiáng)制執(zhí)行，以滿足 React 的許多規(guī)則”。瞬間檔次就上來(lái)了！至于最終效果怎么樣，應(yīng)該還是用戶來(lái)評(píng)判，你認(rèn)為呢？歡迎評(píng)論區(qū)發(fā)表你的看法。

以下是筆者在油管上看到的評(píng)論，看看網(wǎng)友的反饋：

圖片

不過(guò) React 好像還真有一個(gè)操作系統(tǒng)項(xiàng)目 “ReactOS”

既然看到這里了，不妨繼續(xù)看看這個(gè)新的組件語(yǔ)法都有哪些功能

功能 1: Hook 語(yǔ)法

Hook 語(yǔ)法唯一的變化是將關(guān)鍵詞 function 替換為了 hook。這會(huì)促使 flow 嚴(yán)格按照 React Hooks 規(guī)范執(zhí)行。

現(xiàn)在的寫(xiě)法

function useCount() {
  const [count, setCount] = React.useState(0);
  const incrementCount = () => {
    setCount(prevCount => prevCount + 1);
  };
  return [count, incrementCount];
}

Hook 語(yǔ)法的寫(xiě)法

hook useCounter(initial: number) {
  const [count, setCount] = React.useState(0);
  const incrementCount = () => {
    setCount(count => count + 1);
  }
  return [count, incrementCount];
}

功能 2: 組件語(yǔ)法

組件語(yǔ)法和當(dāng)前的寫(xiě)法有幾個(gè)區(qū)別的地方：

• 關(guān)鍵詞 function 替換為了 component：從語(yǔ)義上理解更為清晰，一看就知道這是一個(gè)組件，React 中的組件和函數(shù)都是用關(guān)鍵詞 function 聲明的，但背后的含義是不一樣的。不過(guò)當(dāng)前大家也已經(jīng)習(xí)慣了這種模式，這點(diǎn)收益感覺(jué)并不是很大。
• 使用單獨(dú)參數(shù)代替 props 對(duì)象，聲明類型時(shí)直接指定默認(rèn)值。

現(xiàn)在的寫(xiě)法

type Props = $ReadOnly<{
  hello?: string,
}>;
function App({ hello = 'Hello 五月君' }: Props) {
  return <>{ hello }</>;
}

組件語(yǔ)法的寫(xiě)法

component App(hello?: string = 'Hello 五月君') {
  return <>{ hello }</>;
}

功能 3: 渲染類型

渲染類型是一個(gè)新功能，核心是通過(guò) renders 關(guān)鍵詞定義組件呈現(xiàn)的內(nèi)容是否為預(yù)期的組件類型。

通過(guò)下面示例了解下：

• Footer、Header 這是聲明了兩個(gè)組件，沒(méi)什么特別的
• 重點(diǎn)來(lái)了，你看 Layout 組件，有個(gè)參數(shù) header: renders Header 通過(guò)關(guān)鍵詞 renders 做了類型聲明，意味著 Layout 組件的 header 參數(shù)你只能傳上面定義的 Header 組件。

下面這個(gè)示例是正常的，能得到預(yù)期的結(jié)果。

component Footer() {
  return <footer> Hello Commponent Footer </footer>;
}

component Header() {
  return <header> Hello Commponent header </header>
}

component Layout(header: renders Header) {
  return <div>{header}</div>;
}
export component App() {
  return <Layout header={<Header />} />; 
}

當(dāng)我把 Footer 組件傳遞給 Layout 后，就會(huì)報(bào)錯(cuò) “Cannot create Layout element because Footer element [1] does not render Header [2] in property header. [incompatible-type]”

圖片

以上這些新增的 React 組件語(yǔ)法，是 Facebook 與 React 團(tuán)隊(duì)協(xié)調(diào)設(shè)計(jì)的，已應(yīng)用在 Facebook 的所有代碼庫(kù)中。你說(shuō)，會(huì)不會(huì) React 后面某個(gè)版本，把這些組件語(yǔ)法功能給開(kāi)放出來(lái)呢？

想要嘗試嗎？需要在 Flow v0.233.0 及以上版本來(lái)啟用這些新功能。你可以 copy 下這個(gè)示例倉(cāng)庫(kù) https://github.com/alexmckenley/react-flow-vite-template 上面有現(xiàn)成的環(huán)境。這個(gè)項(xiàng)目的代碼編譯用的是 Vite 框架，所以 2024 年如果還在用 Webpack 的同學(xué)嘗試下 Vite 吧，現(xiàn)在學(xué)習(xí)還不晚。

圖片

參考

• https://flow.org/en/docs/react/component-syntax/
• https://flow.org/en/docs/react/hook-syntax/
• https://flow.org/en/docs/react/render-types/
• https://medium.com/flow-type/announcing-component-syntax-b6c5285660d0