React 入門（7）鈎子函數

序言

為什么要使用Hook？

常用的兩種編寫組件的方式就是就是class組件和函數組件。class組件：通過繼承React.Component來構建組件，雖然提供了state狀態和完備的生命周期函數，但是也有很多不方便的地方。

很多事件需要在掛載期componentDidMount和更新期componentDidUpdate重復書寫。有些副作用還需要在卸載期componentWillUnmount卸載。代碼重復度很高，而且難以理解，一旦忘記了就會引起不少bug。

通過class書寫自然會碰到this的問題，要想使用this函數不能忘記綁定。代碼十分冗余。

函數組件：通過函數直接書寫的組件，看起來是簡潔了許多，但是不能使用state，也沒有生命周期函數、更不能使用react的一些其他特性。只能通過父組件傳遞進來，任人魚肉，只能慘淡的淪為展示組件。

那么，函數組件就只能淪為展示的花瓶嗎？能結合class組件能使用react特性的優點和函數組件簡潔優雅的特性嗎？好在react hook來了，函數組件的春天來了。

React 16.8 新增Hook特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。

單從圖兩個特性，就能看出Hook大大簡化了React的狀態管理和生命周期，並且在無狀態函數中可用。

React中Function Component與Class Component 有何不同？

使用useEffect，可以直接在函數組件內處理生命周期事件。 如果你熟悉 React class 的生命周期函數，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 這三個函數的組合。

React進階 會使用Hook嗎？推薦

什么是Hook？

是不是感覺hook挺神奇的？hook是什么？怎么使用？不用驚訝，hook就是一個鈎子函數，鈎着react的一些api供給函數組件使用。

自定義Hook

只在最頂層

之下React函數調用

Hooks API Reference

useHooks

我們為什么要擁抱React Hook

基本的鈎子

useState

useEffect

useContext

useContext-解決多層傳遞屬性的靈丹妙葯

添加的鈎子

useReducer

useReducer代替Redux

useCallback

useMemo

useRef

useImperativeMethods

useMutationEffect

useLayoutEffect

高階組件HOC

簡單來說，高階組件可以看做一個函數，且該函數接受一個組件作為參數，並返回一個新的組件。

高階組件就是把一個舊的組件變為新的組件。同時增加一些屬性。

缺點：

 

children: React.ReactNode;

defaultProps

 

在 React 中，數據是單向流動的。從示例中，我們能看出來表單的數據源於組件的 state，並通過 props 傳入，這也稱為單向數據綁定。然后，我們又通過 onChange 事件處理器將新的表單數據寫回到組件的 state，完成了雙向數據綁定。

React 16.6 之 React.memo()

{...props}

復雜組件難以理解，尤其是生命周期函數

eslint

"eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "typescript", "autoFix": true },
    { "language": "typescriptreact", "autoFix": true }
  ]

 

命令

yarn add  axios

cnpm install axios

 

資料

Hook React hooks React Hook 16.12版本新特性Hook詳解