一、什么是Hooks

Hooks 是 React 16.8 的新增特性。在不編寫 class 的情況下使用 state 以及其他的 React 特性。Hooks 是一種在函數(shù)式組件中使用有狀態(tài)函數(shù)的方法。

二、類組件

componentDidMount、componentDidUpdate?和?componentWillUnmount?這三個(gè)函數(shù)的組合。

三、常用的Hook Api

• useState
• useEffect
• useContext

• useCallback
• useMemo
• useRef
• useImperativeHandle

1、useState使用

import React, { useState } from 'react';2 import {3     SafeAreaView,4     Text,5     TouchableOpacity6 } from 'react-native';7 import Constants from './expand/dao/Constants';8 import { post } from './expand/dao/HiNet';9 export default (props: any) => {10     const [msg, setMsg] = useState('');11     const doFetch = () => {12         const formData = new FormData();13         formData.append("requestPrams", 'RN');14         post(Constants.test.api)(formData)().then(result => {15             setMsg(JSON.stringify(result));16         }).catch(e => {17             console.log(e);18             setMsg(JSON.stringify(e));19         })20     }21     return (22         <SafeAreaView>23             <TouchableOpacity onPress={doFetch}>24                 <Text>加載</Text>25             </TouchableOpacity>26             <Text>{msg}</Text>27         </SafeAreaView>28     );29 };

從上述代碼中我們不難看出，在React Native中使用State Hook的主要步驟：

1. 導(dǎo)入useState：import React, { useState } from 'react';
2. 通過useState定義state：const [msg, setMsg] = useState('');
   • msg是定義的state中一個(gè)變量，setMsg是用來修改msg變量的關(guān)聯(lián)函數(shù)，它的格式是set+變量名首字母大寫
3. 修改狀態(tài)：通過前面定義的關(guān)聯(lián)函數(shù)setMsg修改即可setMsg(JSON.stringify(result));
4. State Hook的作用范圍：因?yàn)镠ooks只能應(yīng)用與函數(shù)式組件，所以通過它聲明的state的作用范圍是函數(shù)內(nèi)。

Hook 簡(jiǎn)介 – React2、useEffect使用

import React, { useState, useEffect } from 'react';
import {SafeAreaView,StyleSheet,Text,TouchableOpacity
} from 'react-native';
import Constants from './expand/dao/Constants';
import { post } from './expand/dao/HiNet';
export default (props: { navigation: any }) => {const [msg, setMsg] = useState('');useEffect(() => {//對(duì)應(yīng)componentDidUpdatefunction handleStatusChange(status: any) {console.log(status);}const timer = setTimeout(() => {doFetch();}, 2000);// 對(duì)應(yīng)componentWillUnmountreturn function cleanup() {timer && clearTimeout(timer);};});const doFetch = () => {const formData = new FormData();formData.append("requestPrams", 'RN');post(Constants.test.api)(formData)().then(result => {setMsg(JSON.stringify(result));}).catch(e => {console.log(e);setMsg(JSON.stringify(e));})}return (<SafeAreaView><TouchableOpacity onPress={doFetch}><Text>加載</Text></TouchableOpacity><Text>{msg}</Text></SafeAreaView>);
};

• 導(dǎo)入useEffect：import React, { useState,useEffect } from 'react';
• 使用useEffect來實(shí)現(xiàn)不同生命周期函數(shù)的hooks：
  • 直接寫在useEffect(() => {}一層的會(huì)在組件裝載時(shí)調(diào)用，對(duì)應(yīng)componentDidMount
  • handleStatusChange對(duì)應(yīng)componentDidUpdate
  • cleanup對(duì)應(yīng)componentWillUnmount在組件卸載時(shí)調(diào)

3、useContext使用

const value = useContext(MyContext);

接收一個(gè) context 對(duì)象（React.createContext?的返回值）并返回該 context 的當(dāng)前值。當(dāng)前的 context 值由上層組件中距離當(dāng)前組件最近的?<MyContext.Provider>?的?value?prop 決定。

當(dāng)組件上層最近的?<MyContext.Provider>?更新時(shí)，該 Hook 會(huì)觸發(fā)重渲染，并使用最新傳遞給?MyContext?provider 的 context?value?值。即使祖先使用?React.memo?或?shouldComponentUpdate，也會(huì)在組件本身使用?useContext?時(shí)重新渲染。

4、useCallback使用

const memoizedCallback = useCallback(() => {doSomething(a, b);},[a, b],
);

把內(nèi)聯(lián)回調(diào)函數(shù)及依賴項(xiàng)數(shù)組作為參數(shù)傳入?useCallback，它將返回該回調(diào)函數(shù)的 memoized 版本，該回調(diào)函數(shù)僅在某個(gè)依賴項(xiàng)改變時(shí)才會(huì)更新。當(dāng)你把回調(diào)函數(shù)傳遞給經(jīng)過優(yōu)化的并使用引用相等性去避免非必要渲染（例如?shouldComponentUpdate）的子組件時(shí)，它將非常有用。

useCallback(fn, deps)?相當(dāng)于?useMemo(() => fn, deps)。

5、useMemo使用

把“創(chuàng)建”函數(shù)和依賴項(xiàng)數(shù)組作為參數(shù)傳入?useMemo，它僅會(huì)在某個(gè)依賴項(xiàng)改變時(shí)才重新計(jì)算 memoized 值。這種優(yōu)化有助于避免在每次渲染時(shí)都進(jìn)行高開銷的計(jì)算。

6、useRef使用

useRef?返回一個(gè)可變的 ref 對(duì)象，其?.current?屬性被初始化為傳入的參數(shù)（initialValue）。返回的 ref 對(duì)象在組件的整個(gè)生命周期內(nèi)持續(xù)存在。

7、useImperativeHandle使用

useImperativeHandle?可以讓你在使用?ref?時(shí)自定義暴露給父組件的實(shí)例值。在大多數(shù)情況下，應(yīng)當(dāng)避免使用 ref 這樣的命令式代碼。useImperativeHandle?應(yīng)當(dāng)與?forwardRef?一起使用：

8、Hook useMemo useCallback 的區(qū)別

useMemo?用于優(yōu)化計(jì)算開銷大的操作。它會(huì)記憶一個(gè)值，只有當(dāng)依賴項(xiàng)改變時(shí)，才會(huì)重新計(jì)算這個(gè)值。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

在上面的例子中，computeExpensiveValue?是一個(gè)計(jì)算開銷很大的函數(shù)，它依賴于變量?a?和?b。只有當(dāng)?a?或?b?改變時(shí)，computeExpensiveValue?才會(huì)重新計(jì)算。

使用場(chǎng)景：

• 計(jì)算開銷大的值。
• 需要重用計(jì)算結(jié)果以避免不必要的計(jì)算。

Hook 簡(jiǎn)介 – React
React Native Hooks開發(fā)指南