技術標籤：React-Nativereactreact nativehooks

使用Hook狀態管理

• 前言
• 一、Hooks是什麼？
• 二、使用步驟
• • 1.引入庫
  • 2.讀入資料
• 總結

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

文章目錄

• 前言
• 一、Hooks是什麼？
• 二、使用步驟
• • 1.引入庫
  • 2.讀入資料
• 總結

前言

我們大部分 React 類元件可以儲存狀態，而函式元件不能？ 並且類元件具有生命週期，而函式元件卻不能？
React 早期版本，類元件可以通過繼承PureComponent來優化一些不必要的渲染，相對於函式元件，React 官網沒有提供對應的方法來快取函式元件以減少一些不必要的渲染，直接 16.6 出來的 React.memo函式。

提示：本篇文章僅是我個人理解，如有我理解錯誤的地方，歡迎您指教我的問題

一、Hooks是什麼？

Hooks是狀態管理的一種，比如其他的還有Mobx，Redux這些常用的狀態管理器。不同的是Hooks是針對於Function來做監聽狀態的，由於Function是無狀態元件，Hooks的作用就是賦予狀態給Function元件，使他實現和Class差不多的效果。

二、使用步驟

1.引入庫

程式碼如下（示例）：

import React,
 
 {
  useState,
  useCallback,
  useEffect,
  useRef,
  useContext,
  useReducer,
  useMemo,
} from 'react';

2.讀入資料

程式碼如下（示例）：

//usestate設定初始化值
import React, { useState } from 'react';

 const [count, setCount] = useState(0);
 --------------------------------------------------
//useEffect:類似於saga，副作用，一般用於網路請求
 

import React, { useEffect } from 'react';
 useEffect(() => {
    console.log('componentDidMount');//網路請求等...
    return () => {
      console.log('componentWillUnmount ');//解除安裝定時器等...
    };
  }, []);//設定重新整理限制
 //使用useEffect實現網路請求
 // 頁面進來只調用一次
useEffect(()=>{
    axios.get('/getYearMonth').then(res=> {
        console.log('getYearMonth',res);
        setValues(oldValues => ({
            ...oldValues,
            fileList:res.data.msg
        }));
    })
},[]);
--------------------------------------------------
//content  父子元件傳值
import React, { useState } from 'react';

function Show({ count, age, clear }) {
  return (
    <div>
      數量：{count}  
      年齡：{age} 
      <button 
        type="button" 
        onClick={() => { clear(); }}
      >
        復原
      </button>
    </div>
  );
}

function HooksContext() {
  const [count, setCnt] = useState(0);
  const [age, setAge] = useState(16);
  function clear() {
    setCnt(0);
    setAge(16);
  }
  return (
    <div>
      <p>小女子芳年{age}</p>
      <p>你點選了{count}次</p>
      <button 
        type="button" 
        onClick={() => { setCnt(count + 1); 
        setAge(age + 1); }}
      >
        點選+1
      </button>
      <Show count={count} age={age} clear={clear} />
    </div>
  );
}
//通過給Show元件屬性賦值，然後在Show函式元件中以解構引數的方式獲取父元件的值。這種傳值方式和類元件本質上還是一樣的。
--------------------------------------------------
//useContext讀取 context 的值以及訂閱 context 的變化
//content提供了一種樹狀結構，被Context.Provider所包裹的所有元件，都可以直接取資料。
import { createContext } from 'react';

 HooksContext(()=> {
  return (
  //建立 <MyContext.Provider> 來為下層元件提供 context
     <ShowContext.Provider value={{ count, age, clear }}>
  );
})
HooksContexts(()=>{
//從ShowContext中取值
  const { count, age, clear } = useContext(ShowContext);
    return (
    	.............
  );
})
--------------------------------------------------
//userReducer 是 useState的替代方案
import React, { userReducer  } from 'react';

countReducer((state, action)=> {//實現邏輯
  switch (action.type) {
    case 'add':
      return state + 1;
    case 'minus':
      return state - 1;
    default:
      return state;
  }
})
 HooksEffect(()=> {//引用實現
  const [count, dispatch] = useReducer(countReducer, 0);
  return (
    <div>
      <p>你點選了{count}次</p>
      <button
        type="button"
        onClick={() => { dispatch({ type: 'add' }); }}
      >
        點選+1
      </button>
      <button
        type="button"
        onClick={() => { dispatch({ type: 'minus' }); }}
      >
        點選-1
      </button>
    </div>
  );
})
--------------------------------------------------
//useMemo 設定依賴項陣列，只有當依賴項陣列發生改變才會執行引數函式
import React, { useMemo  } from 'react';

 const myAge = useMemo(() => ageChange(age), [age]);//shouldComponentDidUpdata
 //和這個生命週期還有些許不同。它是當檢測的state發生變化時而執行某些函式，避免額外的開銷，節省效能。
 --------------------------------------------------
 //useRef  獲取元件例項物件或者DOM物件，對映，淺拷貝，‘.current’，監聽dom某個節點
 import React, { useRef  } from 'react';
 
 HooksUseRef(()=>{
  const [inputValue, setInputValue] = useState();
  const inputRef = useRef(null);
  
  function inputChangeHandle(e) {
    setInputValue(e.target.value);
  }

  inputRefChangeHandle(()=> {
    console.log(inputRef.current.value);
  }
  return (
        <input
          ref={inputRef}
          onChange={inputRefChangeHandle}
          type="text"
        />
  ));
})
--------------------------------------------------
//useCallBack 是用來快取函式的
//useCallBack和useMemo的不同點在於useMemo相當於快取state，而useCallBack相當於快取函式
//官方給的解釋是這樣的useCallback(fn, deps) 相當於 useMemo(() => fn, deps)。
//使用useCallback如果沒有依賴，則只會執行一次，只有依賴改變，
//才會返回新的函式可以根據這個規則實現bind的效果。
import React, { useCallBack} from 'react';
--------------------------------------------------
//useHooks  自定義函式   需要在函式前面加上use關鍵詞  後面應該用大寫字母與use分隔開-------use Hooks
HooksFunction(()=> {
  return (
   .......................
  );
})

以上則是Hooks的API部分案例

總結

useState:設定初始化值；userEffect:類似於saga，副作用，一般用於網路請求

useMemo:設定依賴項陣列，只有當依賴項陣列發生改變才會執行引數函式，解決重複渲染，解決效能優化

useRef:獲取元件例項物件或者DOM物件，對映，淺拷貝，‘.current’，監聽dom某個節點

forwardref:用於父子元件傳值,傳遞引用，引數是{props,res}

useContext:讓你能夠讀取 context 的值以及訂閱 context 的變化,需要在上層元件樹中使用 <MyContext.Provider> 來為下層元件提供 context並且在元件外部建立一個公用creteContext，元件之間共享狀態

useReducer:類似於redux-reducer，用於處理複雜的state邏輯並且包含多個子值，是usestate的替換方案，使用useReduser還會給觸發深更新元件做效能優化淺渲染

useHook：自定義hook，需要在函式前面加上use關鍵詞

useCallback：用來快取函式的

注意事項：
(1)hooks的state狀態掛鉤是按照順序過來的

(2)hooks不可以再類中使用，只可以在函式中。

(3)hooks不可以在條件語句中使用這樣會導致hook的呼叫順序發生改變

(4)要想有條件的執行effect，可以直接放到hook裡面

(5)如果有需要兩個函式需要重用狀態邏輯，則自定義hook，唯一要求是函式要以use開頭

(6)React：16.8.0 ;React-native:0.59