初學者的 React Hooks 基礎知識

React.js 是一個基於 JavaScript 的開源用戶界面庫。它在 Web 和移動應用程序開發中非常受歡迎。 React 遵循component-based架構的原則。React 中的Acomponent是一段隔離且可重用的代碼。組件可以有兩種類型——類組件和功能組件。 有狀態與無狀態組件 React 中的組件可以是有狀態的或無狀態的。 有狀態組件在其中聲明和管理本地狀態。 無狀態組件是一個純函數,沒有本地狀態和副作用需要管理。 如果我們從功能組件中取出有狀態和副作用邏輯,我們就有了一個無狀態組件。此外,有狀態和副作用邏輯可以在應用程序的其他地方重用。因此,盡可能地將它們與組件隔離是有意義的。 React Hooks 和有狀態的邏輯 使用 React Hooks,我們可以將有狀態的邏輯和副作用與功能組件隔離開來。Hooks 是 JavaScript 函數,通過將它們與組件隔離開來管理狀態的行為和副作用。 因此,我們現在可以將所有有狀態的邏輯隔離在鉤子中,並在組件中使用(組合它們,因為鉤子也是函數)。 React 提供了一堆標準的內置鉤子: useState: 管理狀態。返回一個有狀態的值和一個更新函數來更新它。 useEffect:管理 API 調用、訂閱、計時器、突變等副作用。 useContext:返回上下文的當前值。 useReducer:useState幫助進行複雜狀態管理的替代方法。 useCallback:它返回回調的記憶版本,以幫助子組件不會不必要地重新渲染。 useMemo:它返回一個有助於優化性能的記憶值。 useRef: 它返回一個帶有.current屬性的 ref 對象。ref