React Hooks 使用詳解
本文對 16.8 版本以後 React 發佈的新特性 Hooks 進行了詳細講解，並對一些經常使用的 Hooks 進行代碼演示，但願能夠對須要的朋友提供點幫助。css
1、Hooks 簡介
Hooks 是 React v16.7.0-alpha 中加入的新特性。它可讓你在 class 之外使用 state 和其餘 React 特性。 本文就是演示各類 Hooks API 的使用方式，對於內部的原理這裏就不作詳細說明。html
2、Hooks 初體驗
Example.jsreact
import React, { useState } from 'react';
function Example() {
// 聲明一個名爲「count」的新狀態變量
const [count, setCount] = useState(0);
return (
<div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div>
);
}
export default Example;
複製代碼
useState 就是一個 Hook，能夠在咱們不使用 class 組件的狀況下，擁有自身的 state，而且能夠經過修改 state 來控制 UI 的展現。npm
3、經常使用的兩個 Hooks
一、useState
語法
const [state, setState] = useState(initialState)json
- 傳入惟一的參數:
initialState，能夠是數字，字符串等，也能夠是對象或者數組。 - 返回的是包含兩個元素的數組：第一個元素，
state變量，setState修改 state值的方法。
與在類中使用 setState 的異同點：
- 相同點：也是異步的，例如在
onClick事件中，調用兩次setState，數據只改變一次。 - 不一樣點：類中的
setState是合併，而函數組件中的setState是替換。
使用對比
以前想要使用組件內部的狀態，必須使用 class 組件，例如：數組
Example.js瀏覽器
import React, { Component } from 'react';
export default class Example extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div>
);
}
}
複製代碼
而如今，咱們使用函數式組件也能夠實現同樣的功能了。也就意味着函數式組件內部也可使用 state 了。bash
Example.js網絡
import React, { useState } from 'react';
function Example() {
// 聲明一個名爲「count」的新狀態變量
const [count, setCount] = useState(0);
return (
<div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div>
);
}
export default Example;
複製代碼
優化
建立初始狀態是比較昂貴的，因此咱們能夠在使用 useState API 時，傳入一個函數，就能夠避免從新建立忽略的初始狀態。異步
普通的方式：
// 直接傳入一個值，在每次 render 時都會執行 createRows 函數獲取返回值
const [rows, setRows] = useState(createRows(props.count));
複製代碼
優化後的方式（推薦）：
// createRows 只會被執行一次
const [rows, setRows] = useState(() => createRows(props.count));
複製代碼
二、useEffect
以前不少具備反作用的操做，例如網絡請求，修改 UI 等，通常都是在 class 組件的 componentDidMount 或者 componentDidUpdate 等生命週期中進行操做。而在函數組件中是沒有這些生命週期的概念的，只能 return 想要渲染的元素。 可是如今，在函數組件中也有執行反作用操做的地方了，就是使用 useEffect 函數。
語法
useEffect(() => { doSomething });
兩個參數：
-
第一個是一個函數，是在第一次渲染以及以後更新渲染以後會進行的反作用。
- 這個函數可能會有返回值，假若有返回值，返回值也必須是一個函數，會在組件被銷燬時執行。
-
第二個參數是可選的，是一個數組，數組中存放的是第一個函數中使用的某些反作用屬性。用來優化 useEffect
- 若是使用此優化，請確保該數組包含外部做用域中隨時間變化且 effect 使用的任何值。 不然，您的代碼將引用先前渲染中的舊值。
- 若是要運行 effect 並僅將其清理一次（在裝載和卸載時），則能夠將空數組（[]）做爲第二個參數傳遞。 這告訴React你的 effect 不依賴於來自 props 或 state 的任何值，因此它永遠不須要從新運行。
雖然傳遞 [] 更接近熟悉的
componentDidMount和componentWillUnmount執行規則，但咱們建議不要將它做爲一種習慣，由於它常常會致使錯誤。
使用對比
假如此時咱們有一個需求，讓 document 的 title 與 Example 中的 count 次數保持一致。
使用 class 組件：
Example.js
import React, { Component } from 'react';
export default class Example extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
componentDidMount() {
document.title = `You clicked ${ this.state.count } times`;
}
componentDidUpdate() {
document.title = `You clicked ${ this.state.count } times`;
}
render() {
return (
<div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div>
);
}
}
複製代碼
而如今在函數組件中也能夠進行反作用操做了。
Example.js
import React, { useState, useEffect } from 'react';
function Example() {
// 聲明一個名爲「count」的新狀態變量
const [count, setCount] = useState(0);
// 相似於 componentDidMount 和 componentDidUpdate:
useEffect(() => {
// 使用瀏覽器API更新文檔標題
document.title = `You clicked ${count} times`;
});
return (
<div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div>
);
}
export default Example;
複製代碼
不只如此，咱們可使用 useEffect 執行多個反作用（可使用一個 useEffect 執行多個反作用，也能夠分開執行）
useEffect(() => {
// 使用瀏覽器API更新文檔標題
document.title = `You clicked ${count} times`;
});
const handleClick = () => {
console.log('鼠標點擊');
}
useEffect(() => {
// 給 window 綁定點擊事件
window.addEventListener('click', handleClick);
});
複製代碼
如今看來功能差很少了。可是在使用類組件時，咱們通常會在
componentWillMount生命週期中進行移除註冊的事件等操做。那麼在函數組件中又該如何操做呢？
useEffect(() => {
// 使用瀏覽器API更新文檔標題
document.title = `You clicked ${count} times`;
});
const handleClick = () => {
console.log('鼠標點擊');
}
useEffect(() => {
// 給 window 綁定點擊事件
window.addEventListener('click', handleClick);
return () => {
// 給 window 移除點擊事件
window.addEventListener('click', handleClick);
}
});
複製代碼
能夠看到，咱們傳入的第一個參數，能夠 return 一個函數出去，在組件被銷燬時，會自動執行這個函數。
優化 useEffect
上面咱們一直使用的都是 useEffect 中的第一個參數，傳入了一個函數。那麼 useEffect 的第二個參數呢？
useEffect 的第二個參數是一個數組，裏面放入在 useEffect 使用到的 state 值，能夠用做優化，只有當數組中 state 值發生變化時，纔會執行這個 useEffect。
useEffect(() => {
// 使用瀏覽器API更新文檔標題
document.title = `You clicked ${count} times`;
}, [ count ]);
複製代碼
Tip：若是想模擬 class 組件的行爲，只在 componetDidMount 時執行反作用，在 componentDidUpdate 時不執行，那麼
useEffect的第二個參數傳一個 [] 便可。（可是不建議這麼作，可能會因爲疏漏出現錯誤）
4、其餘 Hoos API
一、useContext
語法
const value = useContext(MyContext);
接受上下文對象（從中React.createContext返回的值）並返回該上下文的當前上下文值。當前上下文值由樹中調用組件上方value最近的prop 肯定<MyContext.Provider>。
useContext(MyContext) 則至關於 static contextType = MyContext 在類中，或者 <MyContext.Consumer>。
用法
在 App.js 文件中建立一個 context，並將 context 傳遞給 Example 子組件
App.js
import React, { createContext } from 'react';
import Example from './Example';
import './App.css';
export const ThemeContext = createContext(null);
export default () => {
return (
<ThemeContext.Provider value="light"> <Example /> </ThemeContext.Provider> ) } 複製代碼
在 Example 組件中，使用 useContext API 能夠獲取到傳入的 context 值
Example.js
import React, { useContext } from 'react';
import { ThemeContext } from './App';
export default () => {
const context = useContext(ThemeContext);
return (
<div>Example 組件：當前 theme 是：{ context }</div>
)
}
複製代碼
注意事項
useContext必須是上下文對象自己的參數：
- 正確： useContext(MyContext)
- 不正確： useContext(MyContext.Consumer)
- 不正確： useContext(MyContext.Provider)
useContext(MyContext)只容許您閱讀上下文並訂閱其更改。您仍然須要<MyContext.Provider>在樹中使用以上內容來爲此上下文提供值。
二、useReducer
語法
const [state, dispatch] = useReducer(reducer, initialArg, init);
useState 的替代方案。 接受類型爲 (state, action) => newState 的reducer，並返回與 dispatch 方法配對的當前狀態。
當你涉及多個子值的複雜
state(狀態) 邏輯時，useReducer一般優於useState。
用法
Example.js
import React, { useReducer } from 'react';
const initialState = {count: 0};
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}
export default () => {
// 使用 useReducer 函數建立狀態 state 以及更新狀態的 dispatch 函數
const [state, dispatch] = useReducer(reducer, initialState);
return (
<> Count: {state.count} <br /> <button onClick={() => dispatch({type: 'increment'})}>+</button> <button onClick={() => dispatch({type: 'decrement'})}>-</button> </> ); } 複製代碼
優化：延遲初始化
還能夠懶惰地建立初始狀態。爲此，您能夠將init函數做爲第三個參數傳遞。初始狀態將設置爲 init(initialArg)。
它容許您提取用於計算 reducer 外部的初始狀態的邏輯。這對於稍後重置狀態以響應操做也很方便：
Example.js
import React, { useReducer } from 'react';
function init(initialCount) {
return {count: initialCount};
}
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
case 'reset':
return init(action.payload);
default:
throw new Error();
}
}
export default ({initialCount = 0}) => {
const [state, dispatch] = useReducer(reducer, initialCount, init);
return (
<> Count: {state.count} <br /> <button onClick={() => dispatch({type: 'reset', payload: initialCount})}> Reset </button> <button onClick={() => dispatch({type: 'increment'})}>+</button> <button onClick={() => dispatch({type: 'decrement'})}>-</button> </> ); } 複製代碼
與 useState 的區別
- 當
state狀態值結構比較複雜時，使用useReducer更有優點。 - 使用
useState獲取的setState方法更新數據時是異步的；而使用useReducer獲取的dispatch方法更新數據是同步的。
針對第二點區別，咱們能夠演示一下： 在上面 useState 用法的例子中，咱們新增一個 button：
useState 中的 Example.js
import React, { useState } from 'react';
function Example() {
// 聲明一個名爲「count」的新狀態變量
const [count, setCount] = useState(0);
return (
<div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> <button onClick={() => { setCount(count + 1); setCount(count + 1); }}> 測試可否連加兩次 </button> </div>
);
}
export default Example;
複製代碼
點擊 測試可否連加兩次 按鈕，會發現，點擊一次，
count仍是隻增長了 1，因而可知，useState確實是 異步 更新數據；
在上面 useReducer 用法的例子中，咱們新增一個 button： useReducer 中的 Example.js
import React, { useReducer } from 'react';
const initialState = {count: 0};
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}
export default () => {
// 使用 useReducer 函數建立狀態 state 以及更新狀態的 dispatch 函數
const [state, dispatch] = useReducer(reducer, initialState);
return (
<> Count: {state.count} <br /> <button onClick={() => dispatch({type: 'increment'})}>+</button> <button onClick={() => dispatch({type: 'decrement'})}>-</button> <button onClick={() => { dispatch({type: 'increment'}); dispatch({type: 'increment'}); }}> 測試可否連加兩次 </button> </> ); } 複製代碼
點擊 測試可否連加兩次 按鈕，會發現，點擊一次，
count增長了 2，因而可知，每次dispatch 一個 action 就會更新一次數據，useReducer確實是 同步 更新數據；
三、useCallback
語法
const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);
返回值 memoizedCallback 是一個 memoized 回調。傳遞內聯回調和一系列依賴項。useCallback將返回一個回憶的memoized版本，該版本僅在其中一個依賴項發生更改時纔會更改。當將回調傳遞給依賴於引用相等性的優化子組件以防止沒必要要的渲染（例如shouldComponentUpdate）時，這很是有用。
這個 Hook 的 API 不可以一兩句解釋的清楚，建議看一下這篇文章：useHooks 第一期：聊聊 hooks 中的 useCallback。裏面介紹的比較詳細。
四、useMemo
語法
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
返回一個memoized值。 傳遞「建立」函數和依賴項數組。useMemo只會在其中一個依賴項發生更改時從新計算memoized值。此優化有助於避免在每一個渲染上進行昂貴的計算。
useMemo在渲染過程當中傳遞的函數會運行。不要作那些在渲染時一般不會作的事情。例如，反作用屬於useEffect，而不是useMemo。
用法
useMemo 能夠幫助咱們優化子組件的渲染，好比這種場景： 在 A 組件中有兩個子組件 B 和 C，當 A 組件中傳給 B 的 props 發生變化時，A 組件狀態會改變，從新渲染。此時 B 和 C 也都會從新渲染。其實這種狀況是比較浪費資源的，如今咱們就可使用 useMemo 進行優化，B 組件用到的 props 變化時，只有 B 發生改變，而 C 卻不會從新渲染。
例子：
ExampleA.js
import React from 'react';
export default ({ text }) => {
console.log('Example A：', 'render');
return <div>Example A 組件：{ text }</div>
}
複製代碼
ExampleB.js
import React from 'react';
export default ({ text }) => {
console.log('Example B：', 'render');
return <div>Example B 組件：{ text }</div>
}
複製代碼
App.js
import React, { useState } from 'react';
import ExampleA from './ExampleA';
import ExampleB from './ExampleB';
import './App.css';
export default () => {
const [a, setA] = useState('ExampleA');
const [b, setB] = useState('ExampleB');
return (
<div>
<ExampleA text={ a } />
<ExampleB text={ b } />
<br />
<button onClick={ () => setA('修改後的 ExampleA') }>修改傳給 ExampleA 的屬性</button>
<button onClick={ () => setB('修改後的 ExampleB') }>修改傳給 ExampleB 的屬性</button>
</div>
)
}
複製代碼
此時咱們點擊上面任意一個按鈕，都會看到控制檯打印了兩條輸出， A 和 B 組件都會被從新渲染。
如今咱們使用 useMemo 進行優化
App.js
import React, { useState, useMemo } from 'react';
import ExampleA from './ExampleA';
import ExampleB from './ExampleB';
import './App.css';
export default () => {
const [a, setA] = useState('ExampleA');
const [b, setB] = useState('ExampleB');
+ const exampleA = useMemo(() => <ExampleA />, [a]);
+ const exampleB = useMemo(() => <ExampleB />, [b]);
return (
<div>
+ {/* <ExampleA text={ a } />
+ <ExampleB text={ b } /> */}
+ { exampleA }
+ { exampleB }
<br />
<button onClick={ () => setA('修改後的 ExampleA') }>修改傳給 ExampleA 的屬性</button>
<button onClick={ () => setB('修改後的 ExampleB') }>修改傳給 ExampleB 的屬性</button>
</div>
)
}
複製代碼
此時咱們點擊不一樣的按鈕，控制檯都只會打印一條輸出，改變 a 或者 b，A 和 B 組件都只有一個會從新渲染。
五、useRef
語法
const refContainer = useRef(initialValue);
useRef 返回一個可變的 ref 對象，其 .current 屬性被初始化爲傳遞的參數（initialValue）。返回的對象將存留在整個組件的生命週期中。
- 從本質上講，useRef就像一個「盒子」，能夠在其.current財產中保持一個可變的價值。
- useRef() Hooks 不只適用於 DOM 引用。 「ref」 對象是一個通用容器，其 current 屬性是可變的，能夠保存任何值（能夠是元素、對象、基本類型、甚至函數），相似於類上的實例屬性。
注意：useRef() 比 ref 屬性更有用。與在類中使用 instance(實例) 字段的方式相似，它能夠 方便地保留任何可變值。
注意，內容更改時useRef 不會通知您。變異.current屬性不會致使從新渲染。若是要在React將引用附加或分離到DOM節點時運行某些代碼，則可能須要使用回調引用。
使用
下面這個例子中展現了能夠在 useRef() 生成的 ref 的 current 中存入元素、字符串
Example.js
import React, { useRef, useState, useEffect } from 'react';
export default () => {
// 使用 useRef 建立 inputEl
const inputEl = useRef(null);
const [text, updateText] = useState('');
// 使用 useRef 建立 textRef
const textRef = useRef();
useEffect(() => {
// 將 text 值存入 textRef.current 中
textRef.current = text;
console.log('textRef.current：', textRef.current);
});
const onButtonClick = () => {
// `current` points to the mounted text input element
inputEl.current.value = "Hello, useRef";
};
return (
<>
{/* 保存 input 的 ref 到 inputEl */}
<input ref={ inputEl } type="text" />
<button onClick={ onButtonClick }>在 input 上展現文字</button>
<br />
<br />
<input value={text} onChange={e => updateText(e.target.value)} />
</>
);
}
複製代碼
點擊 在 input 上展現文字 按鈕，就能夠看到第一個 input 上出現 Hello, useRef；在第二個 input 中輸入內容，能夠看到控制檯打印出對應的內容。
六、useLayoutEffect
語法
useLayoutEffect(() => { doSomething });
與 useEffect Hooks 相似，都是執行反作用操做。可是它是在全部 DOM 更新完成後觸發。能夠用來執行一些與佈局相關的反作用，好比獲取 DOM 元素寬高，窗口滾動距離等等。
進行反作用操做時儘可能優先選擇 useEffect，以避免阻止視覺更新。與 DOM 無關的反作用操做請使用
useEffect。
用法
用法與 useEffect 相似。
Example.js
import React, { useRef, useState, useLayoutEffect } from 'react';
export default () => {
const divRef = useRef(null);
const [height, setHeight] = useState(100);
useLayoutEffect(() => {
// DOM 更新完成後打印出 div 的高度
console.log('useLayoutEffect: ', divRef.current.clientHeight);
})
return <> <div ref={ divRef } style={{ background: 'red', height: height }}>Hello</div> <button onClick={ () => setHeight(height + 50) }>改變 div 高度</button> </> } 複製代碼
5、嘗試編寫自定義 Hooks
這裏咱們就仿照官方的 useReducer 作一個自定義的 Hooks。
一、編寫自定義 useReducer
在 src 目錄下新建一個 useReducer.js 文件：
useReducer.js
import React, { useState } from 'react';
function useReducer(reducer, initialState) {
const [state, setState] = useState(initialState);
function dispatch(action) {
const nextState = reducer(state, action);
setState(nextState);
}
return [state, dispatch];
}
複製代碼
tip: Hooks 不只能夠在函數組件中使用，也能夠在別的 Hooks 中進行使用。
二、使用自定義 useReducer
好了，自定義 useReducer 編寫完成了，下面咱們看一下能不能正常使用呢？
改寫 Example 組件
Example.js
import React from 'react';
// 從自定義 useReducer 中引入
import useReducer from './useReducer';
const initialState = {count: 0};
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}
export default () => {
// 使用 useReducer 函數建立狀態 state 以及更新狀態的 dispatch 函數
const [state, dispatch] = useReducer(reducer, initialState);
return (
<> Count: {state.count} <br /> <button onClick={() => dispatch({type: 'increment'})}>+</button> <button onClick={() => dispatch({type: 'decrement'})}>-</button> </> ); } 複製代碼
5、Hooks 使用及編寫規範
- 不要從常規
JavaScript函數調用Hooks; - 不要在循環，條件或嵌套函數中調用
Hooks; - 必須在組件的頂層調用
Hooks; - 能夠從
React功能組件調用Hooks; - 能夠從自定義
Hooks中調用Hooks; - 自定義
Hooks必須使用use開頭，這是一種約定;
6、使用 React 提供的 ESLint 插件
根據上一段所寫，在 React 中使用 Hooks 須要遵循一些特定規則。可是在代碼的編寫過程當中，可能會忽略掉這些使用規則，從而致使出現一些不可控的錯誤。這種狀況下，咱們就可使用 React 提供的 ESLint 插件：eslint-plugin-react-hooks。下面咱們就看看如何使用吧。
安裝 ESLint 插件
$ npm install eslint-plugin-react-hooks --save
複製代碼
在 .eslintrc 中使用插件
// Your ESLint configuration
{
"plugins": [
// ...
"react-hooks"
],
"rules": {
// ...
"react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
"react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
}
}
複製代碼
7、參考文檔
- 1. React Hooks 使用詳解
- 2. react-hooks之useImperativeHandle使用詳解
- 3. react 使用hooks
- 4. react hooks 使用
- 5. react 16.7 hooks - effect 詳解
- 6. 用 React Hooks 的方式使用 react-dnd
- 7. 理解 React Hooks
- 8. React hooks的使用小結
- 9. 使用 React Hooks 代替 Redux
- 10. React Hooks使用實例（一）
- 更多相關文章...
- • 免費ARP詳解 - TCP/IP教程
- • MySQL常用運算符詳解 - MySQL教程
- • Flink 數據傳輸及反壓詳解
- • Composer 安裝與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。