摘要：顧名思義，受控組件的值由控制，能為與用戶交互的元素提供值，而不受控制的元素不獲取值屬性。另外我發(fā)現(xiàn)受控組件更容易理解和于使用。只是一種把組件作為參數(shù)的函數(shù)，并且與沒(méi)有包裝器的組件相比，能夠返回具有擴(kuò)展功能的新組件。其中三個(gè)基本的是，和。

翻譯：瘋狂的技術(shù)宅
原文：https://www.toptal.com/react/...

本文首發(fā)微信公眾號(hào)：jingchengyideng
歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章

正如 我們的React教程的第一部分 中所指出的，開(kāi)始使用 React 相對(duì)容易。首先使用 Create React App（CRA）初始化一個(gè)新項(xiàng)目，然后開(kāi)始開(kāi)發(fā)。不過(guò)遺憾的是，隨著時(shí)間的推移，代碼可能會(huì)變得難以維護(hù)，特別是在你不熟悉 React 的情況下。組件有可能會(huì)變大，或者你可能最終得到一堆不是組件的組件，最終你可能會(huì)到處編寫(xiě)重復(fù)的代碼。

這時(shí)候你就應(yīng)該試著開(kāi)始真正的 React 之旅了 —— Think in React。

每當(dāng)開(kāi)發(fā)一個(gè)新的程序時(shí)，你需要為其做好在以后轉(zhuǎn)換為 React 應(yīng)用的新設(shè)計(jì)，首先試著確定設(shè)計(jì)草圖中的組件，如何分離它們以使其更易于管理，以及哪些元素是重復(fù)的（或他們的行為）。盡量避免添加可能“將來(lái)有用”的代碼 —— 雖然這很誘人，但可能未來(lái)永遠(yuǎn)也不會(huì)到來(lái)，你將留下一堆具有大量可配置選項(xiàng)的多余通用功能/組件。

此外，如果一個(gè)組件大于 2 到 3 個(gè)窗口的高度，也許值得分離（如果可能的話） —— 以后更容易閱讀。

在大多數(shù)應(yīng)用中，需要輸入和與用戶進(jìn)行某種形式的交互，允許他們輸入內(nèi)容、上傳文件、選擇字段等。 React 用兩種不同的方式處理用戶交互 —— 受控和非受控組件。

顧名思義，受控組件的值由 React 控制，能為與用戶交互的元素提供值，而不受控制的元素不獲取值屬性。多虧了這一點(diǎn)，我們才能把 React 狀態(tài)作為單一的事實(shí)來(lái)源，因此我們?cè)谄聊簧峡吹降呐c當(dāng)前擁有的狀態(tài)是一致的。開(kāi)發(fā)人員需要傳遞一個(gè)函數(shù)，該函數(shù)用來(lái)響應(yīng)用戶與表單的交互，這將會(huì)改變它的狀態(tài)。

class ControlledInput extends React.Component {
 state = {
   value: ""
 };

 onChange = (e) => this.setState({ value: e.target.value });

 render() {
   return (
     
   );
 }
}

在 React 的非受控組件中，我們不關(guān)心值的變化情況，如果想要知道其確切的值，只需通過(guò) ref 訪問(wèn)它。

class UncontrolledInput extends React.Component {
 input = React.createRef();

 getValue = () => {
   console.log(this.input.current.value);
 };

 render() {
   return (
     
   );
 }
}

那么應(yīng)該怎么選擇呢？在大數(shù)情況下用受控組件是可行的，不過(guò)也有一些例外。例如使用非受控制組件的一種情況是 file 類(lèi)型輸入，因?yàn)樗闹凳侵蛔x的，不能在編碼中去設(shè)置（需要用戶交互）。另外我發(fā)現(xiàn)受控組件更容易理解和于使用。對(duì)受控組件的驗(yàn)證是基于重新渲染的，狀態(tài)可以更改，并且可以很輕松的顯示輸入中存在的問(wèn)題（例如格式錯(cuò)誤或者輸入為空）。

在前面我們提到過(guò) refs，這是一個(gè)特殊功能，可以在類(lèi)組件中使用，直到 16.8 中出現(xiàn)了 hooks。

refs 可以通過(guò)引用讓開(kāi)發(fā)人員訪問(wèn) React 組件或DOM元素（取決于我們附加 ref 的類(lèi)型）。最好僅在必須的場(chǎng)景中使用它們，因?yàn)樗鼈儠?huì)使代碼難以閱讀，并打破從上到下的數(shù)據(jù)流。然而，有些情況下它們是必要的，特別是在DOM元素上（例如：用編碼方式改變焦點(diǎn)）。附加到 React 組件元素時(shí)，你可以自由使用所引用的組件中的方法。不過(guò)還是應(yīng)該避免這種做法，因?yàn)橛懈玫姆椒▉?lái)處理它（例如，提升狀態(tài)并將功能移動(dòng)到父組件）。

refs 還可以做到：

使用字符串字面量（歷史遺留的，應(yīng)該避免），

使用在 ref 屬性中設(shè)置的回調(diào)函數(shù)，

通過(guò)創(chuàng)建 ref 作為 React.createRef() ，并將其綁定到類(lèi)屬性，并通過(guò)它去訪問(wèn)（請(qǐng)注意，在 componentDidMount 生命周期中將提供引用）。

沒(méi)有傳遞引用的一種情況是當(dāng)在組件上使用高階組件時(shí) —— 原因是可以理解的，因?yàn)?ref 不是 prop（類(lèi)似于 key）所以它沒(méi)有被傳遞下來(lái)，并且它將引用 HOC 而不是被它包裹的組件。在這種情況下，我們可以使用React.forwardRef，它把 props 和 ref 作為參數(shù)，然后可以將其分配給 prop 并傳遞給我們想要訪問(wèn)的組件。

function withNewReference(Component) {
 class Hoc extends React.Component {
   render() {
     const {forwardedRef, ...props} = this.props;

     return ;
   }
 }

 return React.forwardRef((props, ref) => {
   return ;
 });
}

事情越復(fù)雜，出現(xiàn)問(wèn)題的概率就越高。這就是為什么 React 中會(huì)有錯(cuò)誤邊界。那他們是怎么工作的呢？

如果出現(xiàn)問(wèn)題并且沒(méi)有錯(cuò)誤邊界作為其父級(jí)，則會(huì)導(dǎo)致整個(gè)React 應(yīng)用失敗。不顯示信息比誤導(dǎo)用戶并顯示錯(cuò)誤信息要好，但這并不意味著你應(yīng)該放任整個(gè)應(yīng)用崩潰并顯示白屏。通過(guò)錯(cuò)誤邊界，可以得到更多的靈活性。你可以在整個(gè)應(yīng)用程序中使用并顯示一個(gè)錯(cuò)誤消息，或者在某些小部件中使用它但是不顯示，或者顯示少量信息來(lái)代替這些小部件。

請(qǐng)記住，它僅涉及聲明性代碼的問(wèn)題，而不是你為了處理某些事件或者調(diào)用而編寫(xiě)的命令式代碼。對(duì)于這些情況，你仍應(yīng)使用常規(guī)的 try/catch 方法。

在錯(cuò)誤邊界也可以將信息發(fā)送到你使用的 Error Logger （在 componentDidCatch 生命周期方法中）。

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    logToErrorLogger(error, info);
  }

  render() {
    if (this.state.hasError) {
      return 
Help, something went wrong.
;
    }

    return this.props.children; 
  }
}

高階組件（HOC）經(jīng)常在 React 中被提及，這是一種非常流行的模式，你可能會(huì)用到它（或者已經(jīng)在用了）。如果你熟悉 HOC，可能已經(jīng)在很多庫(kù)中看到過(guò) withNavigation，connect，withRouter。

HOC 只是一種把組件作為參數(shù)的函數(shù)，并且與沒(méi)有 HOC 包裝器的組件相比，能夠返回具有擴(kuò)展功能的新組件。多虧了這一點(diǎn)，你可以實(shí)現(xiàn)一些易于擴(kuò)展的功能，以此增強(qiáng)自己的組件（例如：訪問(wèn)導(dǎo)航）。 HOC 也有一些其它形式的調(diào)用方式，這取決于我們當(dāng)前擁有什么，唯一的參數(shù)必須要傳入一個(gè)組件，但它也可以接受額外的參數(shù) —— 一些選項(xiàng)，或者像在 connect 中一樣，首先使用configurations調(diào)用一個(gè)函數(shù)，該函數(shù)稍后返回一個(gè)帶參組件，并返回 HOC 。

以下是一些你應(yīng)該做的和要避免做的事情：

為包裝器 HOC 函數(shù)添加顯示名稱(chēng)（這樣你就能知道它到底是干什么用的，實(shí)際上是通過(guò)更改 HOC 組件顯示名稱(chēng)來(lái)做到）。

不要在渲染方法中使用HOC —— 你應(yīng)該在其中使用增強(qiáng)組件，而不是在那里創(chuàng)建新的 HOC 組件，因?yàn)樗恢痹谥匦卵b載并丟失其當(dāng)前狀態(tài)。

靜態(tài)方法不會(huì)被自動(dòng)復(fù)制，所以如果你想在新創(chuàng)建的 HOC 中使用一些靜態(tài)方法，需要自己去復(fù)制它們。

涉及到的 Refs 不會(huì)被傳遞，所以使用前面提到的 React.forwardRef 來(lái)解決這些問(wèn)題。

export function importantHoc() {
   return (Component) => class extends React.Component {
       importantFunction = () => {
           console.log("Very Important Function");
       };

       render() {
           return (
               
           );
       }
   };
}

樣式不一定與 React 本身有關(guān)，但出于各種原因還是值得一提的。

首先，常規(guī) CSS/內(nèi)聯(lián)樣式在這里能夠正常應(yīng)用，你只需在 className 屬性中添加 CSS 中的類(lèi)名，它就能正常工作。內(nèi)聯(lián)樣式與常規(guī) HTML 樣式略有不同。樣式屬性也是使用駝峰命名法，因此 border-radius 會(huì)變成 borderRadius 。

React 似乎推廣了一些不僅在 React 中變得普遍的解決方案，例如最近集成在 CRA 中的 CSS 模塊，你可以在其中簡(jiǎn)單地導(dǎo)入 name.modules.css 并用其屬性來(lái)調(diào)整組件的樣式（某些IDE（例如WebStorm）也具有自動(dòng)完成功能，能告訴你可用的名稱(chēng)。

在 React 中另一個(gè)流行的解決方案是 CSS-in-JS（例如，emotion 庫(kù)）。再說(shuō)一點(diǎn)，CSS 模塊和 emotion（或者一般來(lái)說(shuō)是CSS-in-JS）對(duì) React 沒(méi)有限制。

自重寫(xiě)以來(lái)，Hooks 很可能是 React 最受熱切期待的補(bǔ)充。這個(gè)產(chǎn)品是否能不負(fù)眾望？從我的角度來(lái)看，是的，因?yàn)樗_實(shí)是一個(gè)很棒的功能。它們本質(zhì)上是帶來(lái)了新的體驗(yàn)，例如：

允許刪除許多 class 組件，這些組件我們僅僅是使用而不歸我們擁有，例如本地狀態(tài)或 ref，所以組件的代碼看上去更容易閱讀。

可以讓你用更少的代碼來(lái)獲得相同的效果。

使函數(shù)更容易理解和測(cè)試，例如：用 react-testing-library。

也可以攜帶參數(shù)，一個(gè) hook 返回的結(jié)果可以很容易地被另一個(gè) hook 使用（例如，useEffect 中的 setState 被 useState 使用）。

比類(lèi)更好地縮小方式，這對(duì)于 minifiers 來(lái)說(shuō)往往更成問(wèn)題。

可能會(huì)刪除 HOC 并在你的應(yīng)用中渲染 props ，盡管 hook 被設(shè)計(jì)用于解決其他問(wèn)題，但仍會(huì)引入新問(wèn)題。

能夠被熟練的React開(kāi)發(fā)人員定制

默認(rèn)的 React hook 很少。其中三個(gè)基本的hook是 useState，useEffect 和 useContext。還有一些其它的，例如 useRef 和 useMemo，不過(guò)現(xiàn)在我們把重點(diǎn)放在基礎(chǔ)知識(shí)上。

先看一下 useState，讓我們用它來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的計(jì)數(shù)器的。它是如何工作的？基本上整個(gè)結(jié)構(gòu)非常簡(jiǎn)單：

export function Counter() {
 const [counter, setCounter] = React.useState(0);

 return (
   

     {counter}
      setCounter(counter + 1)}>+
   
 );
};

它用 initialState （值）調(diào)用，并返回一個(gè)帶有兩個(gè)元素的數(shù)組。由于數(shù)組解構(gòu)分配，我們可以立即將變量分配給這些元素。第一個(gè)是更新后的最后一個(gè)狀態(tài)，而另一個(gè)是我們將用于更新值的函數(shù)。看起來(lái)相當(dāng)容易，不是嗎？

此外，由于這些組件曾經(jīng)被稱(chēng)為無(wú)狀態(tài)功能組件，現(xiàn)在這種名稱(chēng)不再適用，因?yàn)樗鼈兛梢跃哂腥缟纤镜臓顟B(tài)。所以叫類(lèi)組件和函數(shù)組件似乎更符合它們的實(shí)際操作，至少?gòu)?6.8.0開(kāi)始。

更新函數(shù)（在我們的例子中是setCounter）也可以用作一個(gè)函數(shù)，它將以前的值作為參數(shù)，格式如下：

 setCounter(prevCounter => prevCounter + 1)}>+
 setCounter(prevCounter => prevCounter - 1)}>-

與執(zhí)行淺合并的this.setState 類(lèi)組件不同，設(shè)置函數(shù)（在我們的例子中為 setCounter ）會(huì)覆蓋整個(gè)狀態(tài)。

另外，initialState 也可以是一個(gè)函數(shù)，而不僅僅是一個(gè)普通的值。這有其自身的好處，因?yàn)樵摵瘮?shù)將會(huì)只在組件的初始渲染期間運(yùn)行，之后將不再被調(diào)用。

const [counter, setCounter] = useState(() =>  calculateComplexInitialValue());

最后，如果我們要使用 setCounter 與在當(dāng)前狀態(tài)（counter）的同一時(shí)刻完全相同的值，那么組件 將不會(huì) 重新渲染。

另一方面，useEffect 為我們的功能組件添加副作用，無(wú)論是訂閱、API調(diào)用、計(jì)時(shí)器、還是任何我們認(rèn)為有用的東西。我們傳給 useEffect 的任何函數(shù)都將在 render 之后運(yùn)行，并且是在每次渲染之后執(zhí)行，除非我們添加一個(gè)限制，把應(yīng)該重新運(yùn)行時(shí)需要更改的屬性作為函數(shù)的第二個(gè)參數(shù)。如果我們只想在 mount 上運(yùn)行它并在unmount 上清理，那么只需要在其中傳遞一個(gè)空數(shù)組。

const fetchApi = async () => {
 const value = await fetch("https://jsonplaceholder.typicode.com/todos/1");
 console.log(await value.json());
};

export function Counter() {
 const [counter, setCounter] = useState(0);
 useEffect(() => {
   fetchApi();
 }, []);


 return (
   

     {counter}
      setCounter(prevCounter => prevCounter + 1)}>+
      setCounter(prevCounter => prevCounter - 1)}>-
   
 );
};

由于把空數(shù)組作為第二個(gè)參數(shù)，所以上面的代碼只運(yùn)行一次。在這種情況下它類(lèi)似于 componentDidMount，但稍后會(huì)觸發(fā)它。如果你想在瀏覽器處理之前調(diào)用一個(gè)類(lèi)似的 hook，可以用 useLayoutEffect，但這些更新將會(huì)被同步應(yīng)用，這一點(diǎn)與 useEffect 不同。

useContext 似乎是最容易理解的，因?yàn)槲覀兲峁┝讼胍L問(wèn)的上下文（由 createContext 函數(shù)返回的對(duì)象提供），而它為我們提供了該上下文的值。

const context = useContext(Context);

最后，要編寫(xiě)自己的hook，你可以像這樣寫(xiě)：

function useWindowWidth() {
 let [windowWidth, setWindowWidth] = useState(window.innerWidth);

 function handleResize() {
   setWindowWidth(window.innerWidth);
 }

 useEffect(() => {
   window.addEventListener("resize", handleResize);
   return () => window.removeEventListener("resize", handleResize);
 }, []);

 return windowWidth;
}

基本上，我們使用常規(guī)的 useState hook，我們將其指定為窗口寬度的初始值，然后在 useEffect 中添加一個(gè)監(jiān)聽(tīng)器，它將在窗口調(diào)整大小時(shí)觸發(fā) handleResize。在組件被卸載后會(huì)我們會(huì)及時(shí)知道（查看 useEffect 中的返回值）。是不是很簡(jiǎn)單？

注意： use 在 hook 中很重要。之所以使用它，是因?yàn)樗试S React 檢查你是否做了不好的事情，例如從常規(guī)JS函數(shù)調(diào)用hook。

在支持 Flow 和 TypeScript 之前，React有自己的屬性檢查機(jī)制。

PropTypes 檢查 React 組件接收的屬性（props）是否與我們的內(nèi)容一致。如果一致（例如：應(yīng)該是對(duì)象而不是數(shù)組），將會(huì)在控制臺(tái)中收到警告。請(qǐng)務(wù)必注意：PropTypes 僅在開(kāi)發(fā)模式下進(jìn)行檢查，因?yàn)樗鼈儠?huì)影響性能并在控制臺(tái)中顯示上述警告。

從React 15.5開(kāi)始，PropTypes 被放到了不同的包里，需要多帶帶安裝。它在名為 propTypes（surprise）的靜態(tài)屬性中對(duì)屬性進(jìn)行聲明，可以把它與 defaultProps 結(jié)合使用，如果屬性未定義就會(huì)使用它們（undefined是唯一的情況）。 DefaultProps 與 PropTypes 無(wú)關(guān)，不過(guò)它們可以解決由于 PropTypes 而可能出現(xiàn)的一些警告。

另外兩個(gè)選擇是 Flow 和 TypeScript，它們現(xiàn)在更受歡迎（特別是 TypeScript ）。

TypeScript是 Microsoft 開(kāi)發(fā)的 JavaScript 的類(lèi)型超集，它可以在程序運(yùn)行之前檢查錯(cuò)誤，并為開(kāi)發(fā)工作提供卓越的自動(dòng)完成功能。它還極大地改善了重構(gòu)過(guò)程。由于受到 Microsoft 的支持，它有豐富的類(lèi)型語(yǔ)言特征，也是一個(gè)相當(dāng)安全的選擇。

Flow與TypeScript不同，它不是一種語(yǔ)言，而是 JavaScript 的靜態(tài)類(lèi)型檢查器，因此它更像是 JavaScript 中的工具而并非語(yǔ)言。 Flow 背后的整個(gè)思路與 TypeScript 完全相似。它允許你添加類(lèi)型，以便在運(yùn)行代碼之前杜絕可能出現(xiàn)的錯(cuò)誤。就像 TypeScript 一樣，CRA（創(chuàng)建React App）從一開(kāi)始就支持 Flow。

我發(fā)現(xiàn) TypeScript 更快（幾乎是即時(shí)的），特別是在自動(dòng)完成中，F(xiàn)low 似乎有點(diǎn)慢。值得注意的是，我自己用的 WebStorm 等 IDE 使用 CLI 與 Flow 集成。但是在文件中集成可選用法似乎更容易，只需要在文件開(kāi)頭添加 // @flow 就可進(jìn)行類(lèi)型檢查。另外據(jù)我所知，似乎 TypeScript 最終贏得了與 Flow 的戰(zhàn)斗 —— 它現(xiàn)在更受歡迎，并且一些最流行的庫(kù)正在從 Flow 轉(zhuǎn)向 TypeScript。

官方文檔中還提到了更多的選擇，例如 Reason（由Facebook開(kāi)發(fā)并在React社區(qū)中獲得普及），Kotlin（由JetBrains開(kāi)發(fā)的語(yǔ)言）等等。

顯然，對(duì)于前端開(kāi)發(fā)人員來(lái)說(shuō)，最簡(jiǎn)單的方法是使用 Flow 和 TypeScript，而不是切換到 Kotlin 或F#。但是，對(duì)于正在轉(zhuǎn)型到前端的后端開(kāi)發(fā)人員來(lái)說(shuō)，這可能更容易入手。

對(duì)于生產(chǎn)模式，你需要做的最基本和明顯的改變是：把 DefinePlugin 切換到 “production”，并在Webpack的情況下添加UglifyJsPlugin。在使用 CRA 的情況下，它就像使用 npm run build（將運(yùn)行react-scripts build）一樣簡(jiǎn)單。請(qǐng)注意，Webpack 和 CRA 不是唯一的選項(xiàng)，因?yàn)槟憧梢允褂闷渌麡?gòu)建工具，如 Brunch。這通常包含在官方文檔中，無(wú)論是官方的 React 文檔還是特定工具的文檔。要確保模式設(shè)置正確，你可以使用React Developer Tools，它會(huì)告訴你正在用的那種構(gòu)建（生產(chǎn)與開(kāi)發(fā)）模式應(yīng)該怎么配置。上述步驟會(huì)使你的應(yīng)用在沒(méi)有來(lái)自 React 的檢查和警告的情況下運(yùn)行，并且 bundle 本身也將被最小化。

你還可以為 React 應(yīng)用做更多的事。你如何處理構(gòu)建的 JS 文件？如果尺寸相對(duì)較小，你可以從 “bundle.js” 開(kāi)始，或者做一些類(lèi)似 “vendor + bundle” 或者 “vendor + 最小化需要部件 + 在需要時(shí)導(dǎo)入東西” 之類(lèi)的處理。當(dāng)你是處理一個(gè)非常大的應(yīng)用時(shí)，不需要在一開(kāi)始就導(dǎo)入所有內(nèi)容。請(qǐng)注意，在主 bundle 中去 bundling 一些不會(huì)被使用的 JavaScript 代碼只會(huì)增加 bundle 包的大小，并會(huì)使應(yīng)用在啟動(dòng)時(shí)的加載速度變慢。

如果你計(jì)劃凍結(jié)庫(kù)的版本，并認(rèn)為它們可能長(zhǎng)時(shí)間內(nèi)不會(huì)被更改，那么 Vendor bundles 可能很有用。此外，更大的文件更適合用 gzipping，因此從拆分獲得的好處有時(shí)可能不值得。這取決于文件大小，有時(shí)你需要自己去嘗試。

代碼拆分的方式比這里給出的建議多得多，但讓我們關(guān)注 CRA 和 React 本身可用的內(nèi)容。基本上，為了將代碼分成不同的塊，可以使用 import()，這可以用 Webpack 支持（ import本身是第3階段的提案，所以它還不是語(yǔ)言標(biāo)準(zhǔn)的一部分）。每當(dāng) Webpack 看到 import 時(shí)，它就會(huì)知道需要在這個(gè)階段開(kāi)始拆分代碼，并且不能將它包含在主包中（它在import中的代碼）。

現(xiàn)在我們可以將它與 React.lazy() 連接起來(lái)，它需要 import() 一個(gè)文件路徑，其中包含需要在那個(gè)地方渲染的組件。接下來(lái)，我們可以用 React.suspense()，它會(huì)在該位置顯示不同的組件，一直到導(dǎo)入的組件全部加載完畢。有人可能會(huì)想，如果我要導(dǎo)入單個(gè)組件，是不是就不需要它了呢？

實(shí)際上并非如此，因?yàn)?React.lazy() 將顯示我們 import() 的組件，但 import() 可能會(huì)獲取比單個(gè)組件更大的塊。例如這個(gè)組件可能包含其他庫(kù)，或更多代碼，所以不只是需要一個(gè)文件 —— 它可能是綁在一起的多個(gè)文件。最后，我們可以將所有這些包裝在 ErrorBoundary 中（你可以在本文關(guān)于錯(cuò)誤邊界的那部分中找到代碼） 如果某些內(nèi)容因我們想要導(dǎo)入的組件而失敗（例如出現(xiàn)網(wǎng)絡(luò)錯(cuò)誤），這將作為備用方案。

import ErrorBoundary from "./ErrorBoundary";

const ComponentOne = React.lazy(() => import("./ComponentOne"));

function MyComponent() {
   return (
       
           Loading...