React Hooks用法大全

前言

在 React 的世界中，有容器組件和 UI 組件之分，在 React Hooks 出現之前，UI 組件我們可以使用函數，無狀態組件來展示 UI，而對於容器組件，函數組件就顯得無能爲力，我們依賴於類組件來獲取數據，處理數據，並向下傳遞參數給 UI 組件進行渲染。在我看來，使用 React Hooks 相比於從前的類組件有以下幾點好處：

代碼可讀性更強，原本同一塊功能的代碼邏輯被拆分在了不同的生命週期函數中，容易使開發者不利於維護和迭代，通過 React Hooks 可以將功能代碼聚合，方便閱讀維護
組件樹層級變淺，在原本的代碼中，我們經常使用 HOC/render props 等方式來複用組件的狀態，增強功能等，無疑增加了組件樹層數及渲染，而在 React Hooks 中，這些功能都可以通過強大的自定義的 Hooks 來實現

React 在 v16.8 的版本中推出了 React Hooks 新特性，雖然社區還沒有最佳實踐如何基於 React Hooks 來打造複雜應用(至少我還沒有)，憑藉着閱讀社區中大量的關於這方面的文章，下面我將通過十個案例來幫助你認識理解並可以熟練運用 React Hooks 大部分特性。

useState 保存組件狀態

在類組件中，我們使用 this.state 來保存組件狀態，並對其修改觸發組件重新渲染。比如下面這個簡單的計數器組件，很好詮釋了類組件如何運行：

import React from "react";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      name: "alife"
    };
  }
  render() {
    const { count } = this.state;
    return (
      <div>
        Count: {count}
        <button onClick={() => this.setState({ count: count + 1 })}>+</button>
        <button onClick={() => this.setState({ count: count - 1 })}>-</button>
      </div>
    );
  }
}

一個簡單的計數器組件就完成了，而在函數組件中，由於沒有 this 這個黑魔法，React 通過 useState 來幫我們保存組件的狀態。

import React, { useState } from "react";
function App() {
  const [obj, setObject] = useState({
    count: 0,
    name: "alife"
  });
  return (
    <div className="App">
      Count: {obj.count}
      <button onClick={() => setObject({ ...obj, count: obj.count + 1 })}>+</button>
      <button onClick={() => setObject({ ...obj, count: obj.count - 1 })}>-</button>
    </div>
  );
}

通過傳入 useState 參數後返回一個帶有默認狀態和改變狀態函數的數組。通過傳入新狀態給函數來改變原本的狀態值。值得注意的是 useState 不幫助你處理狀態，相較於 setState 非覆蓋式更新狀態，useState 覆蓋式更新狀態，需要開發者自己處理邏輯。(代碼如上)

似乎有個 useState 後，函數組件也可以擁有自己的狀態了，但僅僅是這樣完全不夠。

useEffect 處理副作用

函數組件能保存狀態，但是對於異步請求，副作用的操作還是無能爲力，所以 React 提供了 useEffect 來幫助開發者處理函數組件的副作用，在介紹新 API 之前，我們先來看看類組件是怎麼做的：

import React, { Component } from "react";
class App extends Component {
  state = {
    count: 1
  };
  componentDidMount() {
    const { count } = this.state;
    document.title = "componentDidMount" + count;
    this.timer = setInterval(() => {
      this.setState(({ count }) => ({
        count: count + 1
      }));
    }, 1000);
  }
  componentDidUpdate() {
    const { count } = this.state;
    document.title = "componentDidMount" + count;
  }
  componentWillUnmount() {
    document.title = "componentWillUnmount";
    clearInterval(this.timer);
  }
  render() {
    const { count } = this.state;
    return (
      <div>
        Count:{count}
        <button onClick={() => clearInterval(this.timer)}>clear</button>
      </div>
    );
  }
}

在例子中，組件每隔一秒更新組件狀態，並且每次觸發更新都會觸發 document.title 的更新(副作用)，而在組件卸載時修改 document.title（類似於清除）

從例子中可以看到，一些重複的功能開發者需要在 componentDidMount 和 componentDidUpdate 重複編寫，而如果使用 useEffect 則完全不一樣。

import React, { useState, useEffect } from "react";
let timer = null;
function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = "componentDidMount" + count;
  },[count]);

  useEffect(() => {
    timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
    // 一定注意下這個順序：
    // 告訴react在下次重新渲染組件之後，同時是下次執行上面setInterval之前調用
    return () => {
      document.title = "componentWillUnmount";
      clearInterval(timer);
    };
  }, []);
  return (
    <div>
      Count: {count}
      <button onClick={() => clearInterval(timer)}>clear</button>
    </div>
  );
}

我們使用 useEffect 重寫了上面的例子，useEffect 第一個參數接收一個函數，可以用來做一些副作用比如異步請求，修改外部參數等行爲，而第二個參數稱之爲dependencies，是一個數組，如果數組中的值變化纔會觸發執行useEffect 第一個參數中的函數。返回值(如果有)則在組件銷燬或者調用函數前調用。

1.比如第一個 useEffect 中，理解起來就是一旦 count 值發生改變，則修改 documen.title 值；
2.而第二個 useEffect 中傳遞了一個空數組[]，這種情況下只有在組件初始化或銷燬的時候纔會觸發，用來代替 componentDidMount 和 componentWillUnmount，慎用；
1. 還有另外一個情況，就是不傳遞第二個參數，也就是useEffect只接收了第一個函數參數，代表不監聽任何參數變化。每次渲染DOM之後，都會執行useEffect中的函數。

基於這個強大 Hooks，我們可以模擬封裝出其他生命週期函數，比如 componentDidUpdate 代碼十分簡單

function useUpdate(fn) {
    // useRef 創建一個引用
    const mounting = useRef(true);
    useEffect(() => {
      if (mounting.current) {
        mounting.current = false;
      } else {
        fn();
      }
    });
}

現在我們有了 useState 管理狀態，useEffect 處理副作用，異步邏輯，學會這兩招足以應對大部分類組件的使用場景。

useContext 減少組件層級

上面介紹了 useState、useEffect 這兩個最基本的 API，接下來介紹的 useContext 是 React 幫你封裝好的，用來處理多層級傳遞數據的方式，在以前組件樹種，跨層級祖先組件想要給孫子組件傳遞數據的時候，除了一層層 props 往下透傳之外，我們還可以使用 React Context API 來幫我們做這件事，舉個簡單的例子：

const { Provider, Consumer } = React.createContext(null);
function Bar() {
  return <Consumer>{color => <div>{color}</div>}</Consumer>;
}
function Foo() {
  return <Bar />;
}
function App() {
  return (
    <Provider value={"grey"}>
      <Foo />
    </Provider>
  );
}

通過 React createContext 的語法，在 APP 組件中可以跨過 Foo 組件給 Bar 傳遞數據。而在 React Hooks 中，我們可以使用 useContext 進行改造。

const colorContext = React.createContext("gray");
function Bar() {
  const color = useContext(colorContext);
  return <div>{color}</div>;
}
function Foo() {
  return <Bar />;
}
function App() {
  return (
    <colorContext.Provider value={"red"}>
      <Foo />
    </colorContext.Provider>
  );
}

傳遞給 useContext 的是 context 而不是 consumer，返回值即是想要透傳的數據了。用法很簡單，使用 useContext 可以解決 Consumer 多狀態嵌套的問題。

function HeaderBar() {
  return (
    <CurrentUser.Consumer>
      {user =>
        <Notifications.Consumer>
          {notifications =>
            <header>
              Welcome back, {user.name}!
              You have {notifications.length} notifications.
            </header>
          }
      }
    </CurrentUser.Consumer>
  );
}

而使用 useContext 則變得十分簡潔，可讀性更強且不會增加組件樹深度。

function HeaderBar() {
  const user = useContext(CurrentUser);
  const notifications = useContext(Notifications);
  return (
    <header>
      Welcome back, {user.name}!
      You have {notifications.length} notifications.
    </header>
  );
}

useReducer

useReducer 這個 Hooks 在使用上幾乎跟 Redux/React-Redux 一模一樣，唯一缺少的就是無法使用 redux 提供的中間件。我們將上述的計時器組件改寫爲 useReducer，

import React, { useReducer } from "react";
const initialState = {
  count: 0
};
function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + action.payload };
    case "decrement":
      return { count: state.count - action.payload };
    default:
      throw new Error();
  }
}
function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "increment", payload: 5 })}>
        +
      </button>
      <button onClick={() => dispatch({ type: "decrement", payload: 5 })}>
        -
      </button>
    </>
  );
}

用法跟 Redux 基本上是一致的，用法也很簡單，算是提供一個 mini 的 Redux 版本。

useCallback 記憶函數

在類組件中，我們經常犯下面這樣的錯誤：

class App {
    render() {
        return <div>
            <SomeComponent style={{ fontSize: 14 }} doSomething={ () => { console.log('do something'); }}  />
        </div>;
    }
}

這樣寫有什麼壞處呢？一旦 App 組件的 props 或者狀態改變了就會觸發重渲染，即使跟 SomeComponent 組件不相關，由於每次 render 都會產生新的 style 和 doSomething（因爲重新render前後， style 和 doSomething分別指向了不同的引用），所以會導致 SomeComponent 重新渲染，倘若 SomeComponent 是一個大型的組件樹，這樣的 Virtual Dom 的比較顯然是很浪費的，解決的辦法也很簡單，將參數抽離成變量。

const fontSizeStyle = { fontSize: 14 };
class App {
    doSomething = () => {
        console.log('do something');
    }
    render() {
        return <div>
            <SomeComponent style={fontSizeStyle} doSomething={ this.doSomething }  />
        </div>;
    }
}

在類組件中，我們還可以通過 this 這個對象來存儲函數，而在函數組件中沒辦法進行掛載了。所以函數組件在每次渲染的時候如果有傳遞函數的話都會重渲染子組件。

function App() {
  const handleClick = () => {
    console.log('Click happened');
  }
  return <SomeComponent onClick={handleClick}>Click Me</SomeComponent>;
}

這裏多說一句，一版把函數式組件理解爲class組件render函數的語法糖，所以每次重新渲染的時候，函數式組件內部所有的代碼都會重新執行一遍。所以上述代碼中每次render，handleClick都會是一個新的引用，所以也就是說傳遞給SomeComponent組件的props.onClick一直在變(因爲每次都是一個新的引用)，所以纔會說這種情況下，函數組件在每次渲染的時候如果有傳遞函數的話都會重渲染子組件。

而有了 useCallback 就不一樣了，你可以通過 useCallback 獲得一個記憶後的函數。

function App() {
  const memoizedHandleClick = useCallback(() => {
    console.log('Click happened')
  }, []); // 空數組代表無論什麼情況下該函數都不會發生改變
  return <SomeComponent onClick={memoizedHandleClick}>Click Me</SomeComponent>;
}

老規矩，第二個參數傳入一個數組，數組中的每一項一旦值或者引用發生改變，useCallback 就會重新返回一個新的記憶函數提供給後面進行渲染。

這樣只要子組件繼承了 PureComponent 或者使用 React.memo 就可以有效避免不必要的 VDOM 渲染。

useMemo 記憶組件

useCallback 的功能完全可以由 useMemo 所取代，如果你想通過使用 useMemo 返回一個記憶函數也是完全可以的。

useCallback(fn, inputs) is equivalent to useMemo(() => fn, inputs).

所以前面使用 useCallback 的例子可以使用 useMemo 進行改寫：

function App() {
  const memoizedHandleClick = useMemo(() => () => {
    console.log('Click happened')
  }, []); // 空數組代表無論什麼情況下該函數都不會發生改變
  return <SomeComponent onClick={memoizedHandleClick}>Click Me</SomeComponent>;
}

唯一的區別是：useCallback 不會執行第一個參數函數，而是將它返回給你，而 useMemo 會執行第一個函數並且將函數執行結果返回給你。所以在前面的例子中，可以返回 handleClick 來達到存儲函數的目的。

所以 useCallback 常用記憶事件函數，生成記憶後的事件函數並傳遞給子組件使用。而 useMemo 更適合經過函數計算得到一個確定的值，比如記憶組件。

function Parent({ a, b }) {
  // Only re-rendered if `a` changes:
  const child1 = useMemo(() => <Child1 a={a} />, [a]);
  // Only re-rendered if `b` changes:
  const child2 = useMemo(() => <Child2 b={b} />, [b]);
  return (
    <>
      {child1}
      {child2}
    </>
  )
}

當 a/b 改變時，child1/child2 纔會重新渲染。從例子可以看出來，只有在第二個參數數組的值發生變化時，纔會觸發子組件的更新。

useRef 保存引用值

useRef 跟 createRef 類似，都可以用來生成對 DOM 對象的引用，看個簡單的例子：

import React, { useState, useRef } from "react";
function App() {
  let [name, setName] = useState("Nate");
  let nameRef = useRef();
  const submitButton = () => {
    setName(nameRef.current.value);
  };
  return (
    <div className="App">
      <p>{name}</p>

      <div>
        <input ref={nameRef} type="text" />
        <button type="button" onClick={submitButton}>
          Submit
        </button>
      </div>
    </div>
  );
}

useRef 返回的值傳遞給組件或者 DOM 的 ref 屬性，就可以通過 ref.current 值訪問組件或真實的 DOM 節點，重點是組件也是可以訪問到的，從而可以對 DOM 進行一些操作，比如監聽事件等等。

當然 useRef 遠比你想象中的功能更加強大，useRef 的功能有點像類屬性，或者說您想要在組件中記錄一些值，並且這些值在稍後可以更改。

利用 useRef 就可以繞過 Capture Value 的特性。可以認爲 ref 在所有 Render 過程中保持着唯一引用，因此所有對 ref 的賦值或取值，拿到的都只有一個最終狀態，而不會在每個 Render 間存在隔離。參考例子：精讀《Function VS Class 組件》

React Hooks 中存在 Capture Value 的特性：

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      alert("count: " + count);
    }, 3000);
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>增加 count</button>
      <button onClick={() => setCount(count - 1)}>減少 count</button>
    </div>
  );
}

先點擊增加button，後點擊減少button，3秒後先alert 1，後alert 0，而不是alert兩次0。這就是所謂的 capture value 的特性。而在類組件中 3 秒後輸出的就是修改後的值，因爲這時候** message 是掛載在 this 變量上，它保留的是一個引用值**，對 this 屬性的訪問都會獲取到最新的值，類組件舉例，在線Demo。講到這裏你應該就明白了，useRef 創建一個引用，就可以有效規避 React Hooks 中 Capture Value 特性。useRef避免 Capture Value

function App() {
  const count = useRef(0);

  const showCount = () => {
    alert("count: " + count.current);
  };

  const handleClick = number => {
    count.current = count.current + number;
    setTimeout(showCount, 3000);
  };

  return (
    <div>
      <p>You clicked {count.current} times</p>
      <button onClick={() => handleClick(1)}>增加 count</button>
      <button onClick={() => handleClick(-1)}>減少 count</button>
    </div>
  );
}

只要將賦值與取值的對象變成 useRef，而不是 useState，就可以躲過 capture value 特性，在 3 秒後得到最新的值。

useImperativeHandle 透傳 Ref

通過 useImperativeHandle 用於讓父組件獲取子組件內的索引

import React, { useRef, useEffect, useImperativeHandle, forwardRef } from "react";
function ChildInputComponent(props, ref) {
  const inputRef = useRef(null);
  useImperativeHandle(ref, () => inputRef.current);
  return <input type="text" name="child input" ref={inputRef} />;
}
const ChildInput = forwardRef(ChildInputComponent);
function App() {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  return (
    <div>
      <ChildInput ref={inputRef} />
    </div>
  );
}

通過這種方式，App 組件可以獲得子組件的 input 的 DOM 節點。

useLayoutEffect 同步執行副作用

大部分情況下，使用 useEffect 就可以幫我們處理組件的副作用，但是如果想要同步調用一些副作用，比如對 DOM 的操作，就需要使用 useLayoutEffect，useLayoutEffect 中的副作用會在 DOM 更新之後同步執行。

function App() {
  const [width, setWidth] = useState(0);
  useLayoutEffect(() => {
    const title = document.querySelector("#title");
    const titleWidth = title.getBoundingClientRect().width;
    console.log("useLayoutEffect");
    if (width !== titleWidth) {
      setWidth(titleWidth);
    }
  });
  useEffect(() => {
    console.log("useEffect");
  });
  return (
    <div>
      <h1 id="title">hello</h1>
      <h2>{width}</h2>
    </div>
  );
}

在上面的例子中，useLayoutEffect 會在 render，DOM 更新之後同步觸發函數，會優於 useEffect 異步觸發函數。

useEffect和useLayoutEffect有什麼區別？

簡單來說就是調用時機不同，useLayoutEffect和原來componentDidMount&componentDidUpdate一致，在react完成DOM更新後馬上同步調用的代碼，會阻塞頁面渲染。而useEffect是會在整個頁面渲染完纔會調用的代碼。

官方建議優先使用useEffect

However, we recommend starting with useEffect first and only trying useLayoutEffect if that causes a problem.

在實際使用時如果想避免頁面抖動（在useEffect裏修改DOM很有可能出現）的話，可以把需要操作DOM的代碼放在useLayoutEffect裏。關於使用useEffect導致頁面抖動，參考git倉庫git倉庫示例

不過useLayoutEffect在服務端渲染時會出現一個warning，要消除的話得用useEffect代替或者推遲渲染時機。

React Hooks 不足

儘管我們通過上面的例子看到 React Hooks 的強大之處，似乎類組件完全都可以使用 React Hooks 重寫。但是當下 v16.8 的版本中，還無法實現 getSnapshotBeforeUpdate 和 componentDidCatch 這兩個在類組件中的生命週期函數。官方也計劃在不久的將來在 React Hooks 進行實現。

父組件

import Child from 'component/Child'

 const dataobj = {
     pdata1: 1,
     pdate2:2
}
 const [dataobj ,setDataobj ] = useState({});
 const pchildref = useRef();
 function parantHandler() {
    // 子組件調用的父組件方法
}
 function parentDivClick() {
    // 父組件調用子組件方法
    pchildref .current._childFn();
}
 return (
    <div>
        <Child 
             ref={pchildref}
             params1={dataobj.pdata1}
             params2={dataobj.pdata2}
             handlerClick={parantHandler}>
        </Child>
        <div onClick={parentDivClick}></div>
    </div>
)

子組件

 const Child = (props,ref) => {   
    // 接收父組件的傳值
     const { params1,params2,handlerClick} = props;
     const childRef = useRef();
    // 暴露的子組件方法，給父組件調用
    useImperativeHandle(ref,() => {
         return {
            _childFn() {
                // something….
            }
        }
    })
    // handlerClick子組件調用父組件方法
     return <div 
        ref={childRef} onClick={handlerClick}>
        </div>
}
// forwardRef 配合useRef 父組件調用子組件方法使用
export default forwardRef(Child);

React Hooks用法大全

前言

useState 保存組件狀態

useEffect 處理副作用

useContext 減少組件層級

useReducer

useCallback 記憶函數

useMemo 記憶組件

useRef 保存引用值

useImperativeHandle 透傳 Ref

useLayoutEffect 同步執行副作用

useEffect和useLayoutEffect有什麼區別？

React Hooks 不足

父組件

子組件

使用c#強大的表達式樹實現對象的深克隆之解決循環引用的問題

痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU啓動那些事（12.A）- uSDHC eMMC啓動時間(RT1170)

本地SSL證書過期輸入命令在IIS自動生成

Springboot限流工具之sentinel單機限流場景無控制檯

Springboot限流工具之CurrentLimiting

springcloudstream配置使用kafka案例

Invalid HTTP method: PATCH在使用RestTemplate的異常解決

畫圖RGB好看的顏色對照表

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結