只需要瞭解常用的4個api, 就能深入理解React Hooks

xiaotianyi發表於2019-04-26
APIReactHook

Hooks的出現，想必大家有所瞭解。如果你是一個Hooks新手,想用Hooks去構造你的應用程式。不要心急，你只需要跟著我一起學習hooks，半個小時你就能掌握React Hooks,並用Hooks去重構你的專案

  • 首先我們要了解Hooks的API
  • 吃透常用的四種API
  • 自定義Hooks
  • 比較好用的Hooks庫
  • 其他的API和有價值的文件

首先我們要了解Hooks的API

  1. 基礎API
    • useState
    • useEffect
    • useContext
  2. 其他的API
    • useReducer
    • useCallback
    • useMemo
    • useRef
    • useImperativeMethods
    • useLayoutEffect

吃透常用的四種

  • useState
  • useEffect
  • useCallback
  • useRef

useState

const [state, setState] = useState(initialState);
複製程式碼

在初始渲染的時候，返回的狀態( state )與作為第一個引數( initialState )傳遞的值相同。

setState 函式用於更新 state(狀態) 。它接受一個新的 state(狀態) 值，並將元件排入重新渲染的佇列。

useEffect

const id = props;
const [value, setValue] = useState(1)
useEffect(() => {
    dosomething();
},[id, value]);
複製程式碼

useEffect 這個副作用函式在react全生命週期中扮演著很重要的角色，與 componentDidMount 和 componentDidUpdate 不同，傳遞給 useEffect 的函式在延遲事件期間在 layout(佈局) 和 paint(繪製) 後觸發。我們也可以把useEffect看作是生命週期函式的一個集合，之前在生命週期中didMount,didUpdate,WillReceiveProps,WillUnmount都可以將函式作為第一個引數dosomething在useEffect執行。
第一個引數為函式dosomething()，第二個引數為一個陣列,陣列裡面的id和value只要有一個改變都會執行dosomething()。

useCallback

useEffect(() => {
    getDeviceSituation(projectId);
}, [getDeviceSituation, projectId]);

const getDeviceSituation = useCallback((id) => {
  dispatch({
    type: 'runTimeCenter/getDeviceSituation',
    payload: {
      projectId: id,
    },
  });
}, [dispatch]);

const onClickTag = () => {
    getDeviceSituation(projectId);
 };
 return (
    <div onclick = {onClickTag}></div>
 )
複製程式碼
  1. useEffect裡面要執行外部封裝的方法時，外部封裝的方法必需要用useCallback包裹一層，第二個引數為對該狀態值的監聽。
  2. useCallback返回的是一個函式，該函式中有對狀態值的監聽，實際上可以理解成一個有函式返回值的useEffect。

useRef

兩種用途

  1. DOM操作（與render props 用法類似）,useRef 返回一個可變的 ref 物件，其 .current 屬性被初始化為傳遞的引數（initialValue）。返回的物件將存留在整個元件的生命週期中。
function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}
複製程式碼

2.例項化欄位，方便保留任何可變值

const string = useRef('aaa');
複製程式碼

自定義Hooks

function useInputValue(initialValue) {
  const [value, setValue] = useState(initialValue);
  const onChange = (event) =>  {
    setValue(event.currentTarget.value);
  };

  return {
    value,
    onChange
  };
}
function Demo(props){
   const name = useInputValue('sss') 
    return (
        <input {...name} />
    ) 
}

複製程式碼

是不是感覺程式碼很清爽，這樣我就可以將所有的元件Hooks化，說白了自定義Hooks,也就是自定義元件。

比較好用的Hooks庫

  1. ESlint外掛 react-hooks 規則
    只需要瞭解常用的4個api, 就能深入理解React Hooks
  2. react 自定義hooks庫
  3. react native 自定義hooks元件庫

其他的API和有價值的文件

另外五種API可去官網檢視其用法，這裡我就不介紹了。

Hooks 原著者Dan useEffect 完整指南

相關文章