中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

分析React組件,Hooks和性能

發布時間:2021-11-06 16:09:35 來源:億速云 閱讀:148 作者:iii 欄目:web開發

這篇文章主要講解了“分析React組件,Hooks和性能”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“分析React組件,Hooks和性能”吧!

正如我們的React教程的***部分中所指出的,開始使用 React 相對容易。首先使用 Create React App(CRA)初始化一個新項目,然后開始開發。不過遺憾的是,隨著時間的推移,代碼可能會變得難以維護,特別是在你不熟悉 React 的情況下。組件有可能會變大,或者你可能最終得到一堆不是組件的組件,最終你可能會到處編寫重復的代碼。

這時候你就應該試著開始真正的 React 之旅了 —— Think in React。

每當開發一個新的程序時,你需要為其做好在以后轉換為 React 應用的新設計,首先試著確定設計草圖中的組件,如何分離它們以使其更易于管理,以及哪些元素是重復的(或他們的行為)。盡量避免添加可能“將來有用”的代碼 —— 雖然這很誘人,但可能未來永遠也不會到來,你將留下一堆具有大量可配置選項的多余通用功能/組件。

分析React組件,Hooks和性能

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

React 中的受控組件與非受控組件

在大多數應用中,需要輸入和與用戶進行某種形式的交互,允許他們輸入內容、上傳文件、選擇字段等。 React 用兩種不同的方式處理用戶交互 —— 受控和非受控組件。

顧名思義,受控組件的值由 React 控制,能為與用戶交互的元素提供值,而不受控制的元素不獲取值屬性。多虧了這一點,我們才能把 React 狀態作為單一的事實來源,因此我們在屏幕上看到的與當前擁有的狀態是一致的。開發人員需要傳遞一個函數,該函數用來響應用戶與表單的交互,這將會改變它的狀態。

class ControlledInput extends React.Component {   state = {     value: ""   };   onChange = (e) => this.setState({ value: e.target.value });   render() {     return (       <input value={this.state.value} onChange={this.onChange}/>     );   }  }

在 React 的非受控組件中,我們不關心值的變化情況,如果想要知道其確切的值,只需通過 ref 訪問它。

class UncontrolledInput extends React.Component {   input = React.createRef();   getValue = () => {     console.log(this.input.current.value);   };   render() {     return (       <input ref={this.input}/>     );   }  }

那么應該怎么選擇呢?在大數情況下用受控組件是可行的,不過也有一些例外。例如使用非受控制組件的一種情況是 file 類型輸入,因為它的值是只讀的,不能在編碼中去設置(需要用戶交互)。另外我發現受控組件更容易理解和于使用。對受控組件的驗證是基于重新渲染的,狀態可以更改,并且可以很輕松的顯示輸入中存在的問題(例如格式錯誤或者輸入為空)。

Refs

在前面我們提到過 refs,這是一個特殊功能,可以在類組件中使用,直到 16.8 中出現了 hooks。

refs 可以通過引用讓開發人員訪問 React 組件或DOM元素(取決于我們附加 ref 的類型)。***僅在必須的場景中使用它們,因為它們會使代碼難以閱讀,并打破從上到下的數據流。然而,有些情況下它們是必要的,特別是在DOM元素上(例如:用編碼方式改變焦點)。附加到 React 組件元素時,你可以自由使用所引用的組件中的方法。不過還是應該避免這種做法,因為有更好的方法來處理它(例如,提升狀態并將功能移動到父組件)。

refs 還可以做到:

  •  使用字符串字面量(歷史遺留的,應該避免),

  •  使用在 ref 屬性中設置的回調函數,

  •  通過創建 ref 作為 React.createRef() ,并將其綁定到類屬性,并通過它去訪問(請注意,在 componentDidMount 生命周期中將提供引用)。

沒有傳遞引用的一種情況是當在組件上使用高階組件時 &mdash;&mdash; 原因是可以理解的,因為 ref 不是 prop(類似于 key)所以它沒有被傳遞下來,并且它將引用 HOC 而不是被它包裹的組件。在這種情況下,我們可以使用React.forwardRef,它把 props 和 ref 作為參數,然后可以將其分配給 prop 并傳遞給我們想要訪問的組件。

function withNewReference(Component) {   class Hoc extends React.Component {     render() {       const {forwardedRef, ...props} = this.props;       return <Component ref={forwardedRef} {...props}/>;     }   }   return React.forwardRef((props, ref) => {     return <Hoc {...props} forwardedRef={ref} />;   });  }

錯誤邊界

事情越復雜,出現問題的概率就越高。這就是為什么 React 中會有錯誤邊界。那他們是怎么工作的呢?

如果出現問題并且沒有錯誤邊界作為其父級,則會導致整個React 應用失敗。不顯示信息比誤導用戶并顯示錯誤信息要好,但這并不意味著你應該放任整個應用崩潰并顯示白屏。通過錯誤邊界,可以得到更多的靈活性。你可以在整個應用程序中使用并顯示一個錯誤消息,或者在某些小部件中使用它但是不顯示,或者顯示少量信息來代替這些小部件。

請記住,它僅涉及聲明性代碼的問題,而不是你為了處理某些事件或者調用而編寫的命令式代碼。對于這些情況,你仍應使用常規的 try/catch 方法。

在錯誤邊界也可以將信息發送到你使用的 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 <div>Help, something went wrong.</div>;      }      return this.props.children;     }  }

高階組件

高階組件(HOC)經常在 React 中被提及,這是一種非常流行的模式,你可能會用到它(或者已經在用了)。如果你熟悉 HOC,可能已經在很多庫中看到過 withNavigation,connect,withRouter。

HOC 只是一種把組件作為參數的函數,并且與沒有 HOC 包裝器的組件相比,能夠返回具有擴展功能的新組件。多虧了這一點,你可以實現一些易于擴展的功能,以此增強自己的組件(例如:訪問導航)。 HOC 也有一些其它形式的調用方式,這取決于我們當前擁有什么,唯一的參數必須要傳入一個組件,但它也可以接受額外的參數 &mdash;&mdash; 一些選項,或者像在 connect 中一樣,首先使用configurations調用一個函數,該函數稍后返回一個帶參組件,并返回 HOC 。

以下是一些你應該做的和要避免做的事情:

  •  為包裝器 HOC 函數添加顯示名稱(這樣你就能知道它到底是干什么用的,實際上是通過更改 HOC 組件顯示名稱來做到)。

    • 不要在渲染方法中使用HOC &mdash;&mdash; 你應該在其中使用增強組件,而不是在那里創建新的 HOC 組件,因為它一直在重新裝載并丟失其當前狀態。

    • 靜態方法不會被自動復制,所以如果你想在新創建的 HOC 中使用一些靜態方法,需要自己去復制它們。

    •  涉及到的 Refs 不會被傳遞,所以使用前面提到的 React.forwardRef 來解決這些問題。 

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

樣式

樣式不一定與 React 本身有關,但出于各種原因還是值得一提的。

首先,常規 CSS/內聯樣式在這里能夠正常應用,你只需在 className 屬性中添加 CSS 中的類名,它就能正常工作。內聯樣式與常規 HTML 樣式略有不同。樣式屬性也是使用駝峰命名法,因此 border-radius 會變成 borderRadius 。

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

在 React 中另一個流行的解決方案是 CSS-in-JS(例如,emotion 庫)。再說一點,CSS 模塊和 emotion(或者一般來說是CSS-in-JS)對 React 沒有限制。

React 中的 Hooks

自重寫以來,Hooks 很可能是 React 最受熱切期待的補充。這個產品是否能不負眾望?從我的角度來看,是的,因為它確實是一個很棒的功能。它們本質上是帶來了新的體驗,例如:

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

  •  可以讓你用更少的代碼來獲得相同的效果。

  •  使函數更容易理解和測試,例如:用 react-testing-library。

  •  也可以攜帶參數,一個 hook 返回的結果可以很容易地被另一個 hook 使用(例如,useEffect 中的 setState 被 useState 使用)。

  •  比類更好地縮小方式,這對于 minifiers 來說往往更成問題。

  •  可能會刪除 HOC 并在你的應用中渲染 props ,盡管 hook 被設計用于解決其他問題,但仍會引入新問題。

    •   能夠被熟練的React開發人員定制

默認的 React hook 很少。其中三個基本的hook是 useState,useEffect 和 useContext。還有一些其它的,例如 useRef 和 useMemo,不過現在我們把重點放在基礎知識上。

先看一下 useState,讓我們用它來創建一個簡單的計數器的。它是如何工作的?基本上整個結構非常簡單:

export function Counter() {   const [counter, setCounter] = React.useState(0);   return (     <div>       {counter}       <button onClick={() => setCounter(counter + 1)}>+</button>     </div>   );  };

它用 initialState (值)調用,并返回一個帶有兩個元素的數組。由于數組解構分配,我們可以立即將變量分配給這些元素。***個是更新后的***一個狀態,而另一個是我們將用于更新值的函數。看起來相當容易,不是嗎?

此外,由于這些組件曾經被稱為無狀態功能組件,現在這種名稱不再適用,因為它們可以具有如上所示的狀態。所以叫類組件和函數組件似乎更符合它們的實際操作,至少從16.8.0開始。

更新函數(在我們的例子中是setCounter)也可以用作一個函數,它將以前的值作為參數,格式如下:

<button onClick={() => setCounter(prevCounter => prevCounter + 1)}>+</button>  <button onClick={() => setCounter(prevCounter => prevCounter - 1)}>-</button>

與執行淺合并的this.setState 類組件不同,設置函數(在我們的例子中為 setCounter )會覆蓋整個狀態。

另外,initialState 也可以是一個函數,而不僅僅是一個普通的值。這有其自身的好處,因為該函數將會只在組件的初始渲染期間運行,之后將不再被調用。

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

***,如果我們要使用 setCounter 與在當前狀態(counter)的同一時刻完全相同的值,那么組件 將不會 重新渲染。

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

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 (     <div>       {counter}       <button onClick={() => setCounter(prevCounter => prevCounter + 1)}>+</button>       <button onClick={() => setCounter(prevCounter => prevCounter - 1)}>-</button>     </div>   );  };

由于把空數組作為第二個參數,所以上面的代碼只運行一次。在這種情況下它類似于 componentDidMount,但稍后會觸發它。如果你想在瀏覽器處理之前調用一個類似的 hook,可以用 useLayoutEffect,但這些更新將會被同步應用,這一點與 useEffect 不同。

useContext 似乎是最容易理解的,因為我們提供了想要訪問的上下文(由 createContext 函數返回的對象提供),而它為我們提供了該上下文的值。

const context = useContext(Context);

***,要編寫自己的hook,你可以像這樣寫:

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;  }

基本上,我們使用常規的 useState hook,我們將其指定為窗口寬度的初始值,然后在 useEffect 中添加一個監聽器,它將在窗口調整大小時觸發 handleResize。在組件被卸載后會我們會及時知道(查看 useEffect 中的返回值)。是不是很簡單?

注意: use 在 hook 中很重要。之所以使用它,是因為它允許 React 檢查你是否做了不好的事情,例如從常規JS函數調用hook。

類型檢查

在支持 Flow 和 TypeScript 之前,React有自己的屬性檢查機制。

PropTypes 檢查 React 組件接收的屬性(props)是否與我們的內容一致。如果一致(例如:應該是對象而不是數組),將會在控制臺中收到警告。請務必注意:PropTypes 僅在開發模式下進行檢查,因為它們會影響性能并在控制臺中顯示上述警告。

從React 15.5開始,PropTypes 被放到了不同的包里,需要單獨安裝。它在名為 propTypes(surprise)的靜態屬性中對屬性進行聲明,可以把它與 defaultProps 結合使用,如果屬性未定義就會使用它們(undefined是唯一的情況)。 DefaultProps 與 PropTypes 無關,不過它們可以解決由于 PropTypes 而可能出現的一些警告。

另外兩個選擇是 Flow 和 TypeScript,它們現在更受歡迎(特別是 TypeScript )。

  •  TypeScript是 Microsoft 開發的 JavaScript 的類型超集,它可以在程序運行之前檢查錯誤,并為開發工作提供卓越的自動完成功能。它還極大地改善了重構過程。由于受到 Microsoft 的支持,它有豐富的類型語言特征,也是一個相當安全的選擇。

  •  Flow與TypeScript不同,它不是一種語言,而是 JavaScript 的靜態類型檢查器,因此它更像是 JavaScript 中的工具而并非語言。 Flow 背后的整個思路與 TypeScript 完全相似。它允許你添加類型,以便在運行代碼之前杜絕可能出現的錯誤。就像 TypeScript 一樣,CRA(創建React App)從一開始就支持 Flow。

我發現 TypeScript 更快(幾乎是即時的),特別是在自動完成中,Flow 似乎有點慢。值得注意的是,我自己用的 WebStorm 等 IDE 使用 CLI 與 Flow 集成。但是在文件中集成可選用法似乎更容易,只需要在文件開頭添加 // @flow 就可進行類型檢查。另外據我所知,似乎 TypeScript 最終贏得了與 Flow 的戰斗 &mdash;&mdash; 它現在更受歡迎,并且一些***的庫正在從 Flow 轉向 TypeScript。

官方文檔中還提到了更多的選擇,例如 Reason(由Facebook開發并在React社區中獲得普及),Kotlin(由JetBrains開發的語言)等等。

顯然,對于前端開發人員來說,最簡單的方法是使用 Flow 和 TypeScript,而不是切換到 Kotlin 或F#。但是,對于正在轉型到前端的后端開發人員來說,這可能更容易入手。

生產模式和 React 性能

對于生產模式,你需要做的最基本和明顯的改變是:把 DefinePlugin 切換到 “production”,并在Webpack的情況下添加UglifyJsPlugin。在使用 CRA 的情況下,它就像使用 npm run build(將運行react-scripts build)一樣簡單。請注意,Webpack 和 CRA 不是唯一的選項,因為你可以使用其他構建工具,如 Brunch。這通常包含在官方文檔中,無論是官方的 React 文檔還是特定工具的文檔。要確保模式設置正確,你可以使用React Developer Tools,它會告訴你正在用的那種構建(生產與開發)模式應該怎么配置。上述步驟會使你的應用在沒有來自 React 的檢查和警告的情況下運行,并且 bundle 本身也將被最小化。

你還可以為 React 應用做更多的事。你如何處理構建的 JS 文件?如果尺寸相對較小,你可以從 “bundle.js” 開始,或者做一些類似 “vendor + bundle” 或者 “vendor + 最小化需要部件 + 在需要時導入東西” 之類的處理。當你是處理一個非常大的應用時,不需要在一開始就導入所有內容。請注意,在主 bundle 中去 bundling 一些不會被使用的 JavaScript 代碼只會增加 bundle 包的大小,并會使應用在啟動時的加載速度變慢。

如果你計劃凍結庫的版本,并認為它們可能長時間內不會被更改,那么 Vendor bundles 可能很有用。此外,更大的文件更適合用 gzipping,因此從拆分獲得的好處有時可能不值得。這取決于文件大小,有時你需要自己去嘗試。

代碼拆分

代碼拆分的方式比這里給出的建議多得多,但讓我們關注 CRA 和 React 本身可用的內容。基本上,為了將代碼分成不同的塊,可以使用 import(),這可以用 Webpack 支持( import本身是第3階段的提案,所以它還不是語言標準的一部分)。每當 Webpack 看到 import 時,它就會知道需要在這個階段開始拆分代碼,并且不能將它包含在主包中(它在import中的代碼)。

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

實際上并非如此,因為 React.lazy() 將顯示我們 import() 的組件,但 import() 可能會獲取比單個組件更大的塊。例如這個組件可能包含其他庫,或更多代碼,所以不只是需要一個文件 &mdash;&mdash; 它可能是綁在一起的多個文件。***,我們可以將所有這些包裝在 ErrorBoundary 中(你可以在本文關于錯誤邊界的那部分中找到代碼) 如果某些內容因我們想要導入的組件而失敗(例如出現網絡錯誤),這將作為備用方案。

import ErrorBoundary from './ErrorBoundary';  const ComponentOne = React.lazy(() => import('./ComponentOne'));  function MyComponent() {     return (         <ErrorBoundary>             <React.Suspense fallback={<div>Loading...</div>}>                 <ComponentOne/>             </React.Suspense>         </ErrorBoundary>     );  }

這是一個簡單的例子,但顯然你可以做得更多。你可以使用 import 和 React.lazy 進行動態路由劃分(例如:管理員與常規用戶)。請注意,React.lazy 僅支持默認導出,并且不支持服務器端呈現。

React 代碼性能

關于性能,如果你的 React 應用運行緩慢,有兩種工具可以幫助你找出問題。

***個是 Chrome Performance Tab,它會告訴你每個組件會發生什么(例如,mount,update )。有了它你應該能夠確定哪個組件可能會出現性能問題,然后進行優化。

另一種選擇是 DevTools Profiler ,它在 React 16.5+ 中可用,并與 shouldComponentUpdate 配合(或PureComponent,在本教程的***部分中解釋),我們可以提高一些關鍵組件的性能。

顯然,對網絡進行基本優化是***的,例如對一些事件進行去抖動(例如,滾動),對動畫保持謹慎(使用變換而不是通過改變高度并實現動畫)等等。這些問題很容易被忽略,特別是如果你剛剛掌握了 React。

2019年及以后的 React 現狀

如果要討論 React 的未來,我個人不會太在意。從我的角度來看,React 在 2019 年及以后的地位很難被撼動。

React 擁有如此強大的地位,在一個大社區的支持下很難被廢棄。 React社區非常棒,它總是產生新的創意,核心團隊一直在不斷努力改進 React,并添加新功能和修復舊問題。 React 也得到了一家大公司的支持,但許可證已經不是問題 &mdash;&mdash; 它現在使用 MIT license。

是的,有一些事情有望改變或改進;例如,使 React 稍微小一些(提到的一個措施是刪除合成事件)或將 className 重命名為 class。當然,即使這些看似微小的變化也可能導致諸如影響瀏覽器兼容性等問題。就個人而言,我也想知道當 WebComponent 獲得更多人氣時會發生什么,因為它可能會增加一些 React 經常用到的東西。我不相信他們會成為一個徹頭徹尾的替代者,但我相信他們可以很好地相互補充。

至于短期,hook 剛剛被加入到 React。這可能是自 React 重寫以來發生的***變化,因為它們將帶來更多可能性并增強更多功能組件(現在他們真的被大肆宣傳)。

***,正如我最近所說的那樣,有React Native。對我來說,這是一項偉大的技術,在過去的幾年中發生了很大的變化。 React Native正在重寫它的核心,這應該以與 React 重寫類似的方式完成(它全部是內部的,幾乎沒有任何東西應該為開發人員改變)。異步渲染成為本機和 JavaScript 之間更快更輕量級的橋梁。當然還有更多改變。

在 React 生態中有很多值得期待的東西,但 hook(以及React Native,如果有人喜歡手機應用的話)的更新可能將會是我們在2019年所能看到的最重要的變化。

感謝各位的閱讀,以上就是“分析React組件,Hooks和性能”的內容了,經過本文的學習后,相信大家對分析React組件,Hooks和性能這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

惠水县| 南江县| 靖州| 永康市| 永泰县| 泗阳县| 六安市| 卢龙县| 措勤县| 长沙县| 通化县| 眉山市| 绍兴县| 梓潼县| 中阳县| 鲁甸县| 贵溪市| 敖汉旗| 齐河县| 博湖县| 抚宁县| 乐亭县| 桐乡市| 兴安县| 洪湖市| 丹江口市| 冀州市| 柳林县| 永定县| 海宁市| 太仆寺旗| 武邑县| 仪陇县| 休宁县| 东港市| 噶尔县| 安庆市| 专栏| 桂平市| 南漳县| 吴旗县|