學習React-Hook，我們應(yīng)該思考哪些東西

組合優(yōu)于繼承，我們一直在尋求「 解耦 」來把復雜的業(yè)務(wù)代碼簡單化。而Hook的最大優(yōu)點就是代碼復用，更簡潔。而且Hook在寫法上也遵循了「 單一職責模式 」。

今天主要分享的是在學習Hook之前，我們應(yīng)該做哪些思考。

• 數(shù)據(jù)綁定、狀態(tài)管理
• 生命周期、組件掛載卸載
• 組件傳值
• 節(jié)點元素獲取
• 復用邏輯抽離

數(shù)據(jù)綁定

在react中state的概念是內(nèi)部狀態(tài)的管理，它的變更直接會影響頁面的渲染。

在hook中把setState拆開了。每一個單個的state的都會是一個單個的狀態(tài)，單個狀態(tài)的變更不會影響其他state。我們可以通過useState實現(xiàn)單個狀態(tài)的初始化定義。

useState的參數(shù)可以是一個數(shù)字、字符串、布爾值、數(shù)組或?qū)ο?，也可以是一個函數(shù)。

同樣我們避免不了會使用集合(對象)來處理一些邏輯。

 
 
 
 
  
  
  
  
const [count, setCount] = useState(0); 
  
  
  
  
const [count, setCount] = useState(() => 0); 
  
  
  
  
const [obj, setObj] = useState({}); 
  
  
  
  
setObj((prevObj) => { 
  
  
  
  
  // 也可以使用 Object.assign 
  
  
  
  
  return { ...prevObj, age: 23 }; 
  
  
  
  
}); 
 
 
 

一般我們會定義一個初始值initialState,如果這個初始值，需要額外的計算開銷，我們可以定義一個函數(shù)來處理。需要注意的是，useState 函數(shù)只會在初始渲染的時候被調(diào)用。

 
 
 
 
  
  
  
  
const [state, setState] = useState(() => { 
  
  
  
  
  // 額外的操作someExpensiveComputation 
  
  
  
  
  const initialState = someExpensiveComputation(props); 
  
  
  
  
  return initialState; 
  
  
  
  
}); 
 
 
 

對于多個state集合的處理，還有另一種方案就是useReducer。

• 比如單個 state 的狀態(tài)會影響多個 state 的值的時候。
• 比如多個 state 的狀態(tài)會隨著某種類型的改變而改變。

如下多個 state 會隨著登錄、登出、刷新 token 這三種狀態(tài)的改變而改變。

 
 
 
 
  
  
  
  
const [state, dispatch] = React.useReducer( 
  
  
  
  
  (prevState, action) => { 
  
  
  
  
    switch (action.type) { 
  
  
  
  
      case "RESTORE_TOKEN": 
  
  
  
  
        return { 
  
  
  
  
          ...prevState, 
  
  
  
  
          userToken: action.token, 
  
  
  
  
          isLoading: false, 
  
  
  
  
        }; 
  
  
  
  
      case "SIGN_IN": 
  
  
  
  
        return { 
  
  
  
  
          ...prevState, 
  
  
  
  
          isSignout: false, 
  
  
  
  
          userToken: action.token, 
  
  
  
  
        }; 
  
  
  
  
      case "SIGN_OUT": 
  
  
  
  
        return { 
  
  
  
  
          ...prevState, 
  
  
  
  
          isSignout: true, 
  
  
  
  
          userToken: null, 
  
  
  
  
        }; 
  
  
  
  
    } 
  
  
  
  
  }, 
  
  
  
  
  { 
  
  
  
  
    isLoading: true, 
  
  
  
  
    isSignout: false, 
  
  
  
  
    userToken: null, 
  
  
  
  
  } 
  
  
  
  
); 
 
 
 

副作用

hook 提供了一種新的概念來代替生命周期函數(shù)，就是useEffect副作用。它被看作是從 React 的純函數(shù)式世界通往命令式世界的逃生通道。

它的執(zhí)行時機是在屏幕元素渲染結(jié)束后延遲執(zhí)行。

它的作用有：

• 它可以監(jiān)控 state 值的變化
• 它可以處理只運行一次的邏輯，有點類似生命周期 componentDidMount 和 componentWillUnmount 的思維模式，
• 添加訂閱、設(shè)置定時器、發(fā)送網(wǎng)絡(luò)請求
• 更多其他

 
 
 
 
  
  
  
  
// 通過的第二個參數(shù)來實現(xiàn)只執(zhí)行一次或監(jiān)控state值 
  
  
  
  
useEffect(() => { 
  
  
  
  
  // ... 
  
  
  
  
}, []); 
  
  
  
  
 
  
  
  
  
// useEffect第一個參數(shù)的返回函數(shù)就是componentWillUnmount的思想，在組件卸載之前進行 
  
  
  
  
useEffect(() => { 
  
  
  
  
  const subscription = props.source.subscribe(); 
  
  
  
  
  return () => { 
  
  
  
  
    // 清除訂閱 
  
  
  
  
    subscription.unsubscribe(); 
  
  
  
  
  }; 
  
  
  
  
}); 
 
 
 

但是這種延遲執(zhí)行的機制不能滿足我們所有的場景，如果我們想要實現(xiàn)屏幕繪制和副作用同步執(zhí)行，比如實時修改dom結(jié)構(gòu)等這樣的場景，useEffect無法滿足，會出現(xiàn)閃屏的效果。

我們可以通過useLayoutEffect來實現(xiàn)，它的執(zhí)行時機是在組件加載完成后，屏幕繪制之前進行。但這樣也有缺點就是阻塞屏幕渲染，可能會出現(xiàn)白屏或停頓。

所以useLayoutEffect的使用場景：

• 防止閃爍，比較耗時的計算
• Dom操作
• componentDidMount和componentDidUpdate的場景

如果只是單獨的獲取(get操作)就沒有必要使用useLayoutEffect。

組件傳值

組件傳值的核心：

• 父傳子，通過在子組件設(shè)置屬性;
• 子傳父，通過回調(diào)。
• 多級組件，通過中間狀態(tài)管理

 
 
 
 
  
  
  
  
// 父組件 
  
  
  
  
function Home() { 
  
  
  
  
  const [currentTab, setCurrentTab] = useState("msg"); 
  
  
  
  
  return ( 
  
  
  
  
    <> 
  
  
  
  
       
  
  
  
  
         // 父傳子 
  
  
  
  
         
  
  
  
  
        // 子傳父 
  
  
  
  
        setCurrentTab(code)} /> 
  
  
  
  
       
  
  
  
  
      {currentTab} 
  
  
  
  
     
  
  
  
  
  ); 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
//子組件 
  
  
  
  
function TabView({ currentTab, setCurrentTab }) { 
  
  
  
  
  return ( 
  
  
  
  
     
  
  
  
  
      {currentTab} 
  
  
  
  
        
  
  
  
        title="修改tab" 
  
  
  
  
        onPress={() => { 
  
  
  
  
          setCurrentTab("pass"); 
  
  
  
  
        }} 
  
  
  
  
      /> 
  
  
  
  
     
  
  
  
  
  ); 
  
  
  
  
} 
  
  
  
  
//子傳父 
  
  
  
  
function CodeView({ code, changeCode }) { 
  
  
  
  
  return ( 
  
  
  
  
     
  
  
  
  
      {code} 
  
  
  
  
        
  
  
  
        title="修改tab" 
  
  
  
  
        onPress={changeCode} 
  
  
  
  
      /> 
  
  
  
  
     
  
  
  
  
  ); 
  
  
  
  
} 
 
 
 

多組件的傳值，可以通過context來處理。

 
 
 
 
  
  
  
  
export const MyContent = React.createContext({}); 
  
  
  
  
 
  
  
  
  
function Home() { 
  
  
  
  
  return ( 
  
  
  
  
      
  
  
  
      value={{ 
  
  
  
  
        currentTab, 
  
  
  
  
        phoneValue, 
  
  
  
  
        codeValue, 
  
  
  
  
        setPhoneValue, 
  
  
  
  
        setCodeValue, 
  
  
  
  
      }} 
  
  
  
  
    > 
  
  
  
  
       
  
  
  
  
       
  
  
  
  
     
  
  
  
  
  ); 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
function FormItem() { 
  
  
  
  
  const { phoneValue, setPhoneValue } = useContext(MyContent); 
  
  
  
  
  return ( 
  
  
  
  
     
  
  
  
  
      {phoneValue} 
  
  
  
  
      {/* ...*/} 
  
  
  
  
     
  
  
  
  
  ); 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
function SwitchItemView() { 
  
  
  
  
  const { codeValue, setCodeValue } = useContext(MyContent); 
  
  
  
  
  return ( 
  
  
  
  
     
  
  
  
  
      {phoneValue} 
  
  
  
  
      {/* ...*/} 
  
  
  
  
     
  
  
  
  
  ); 
  
  
  
  
} 
 
 
 

元素節(jié)點操作

hook通過useRef來創(chuàng)建節(jié)點對象，然后通過ref掛載，通過current來獲取。

 
 
 
 
  
  
  
  
function TextInputWithFocusButton() { 
  
  
  
  
  const inputEl = useRef(null); 
  
  
  
  
  const onButtonClick = () => { 
  
  
  
  
    inputEl.current.focus(); 
  
  
  
  
  }; 
  
  
  
  
  return ( 
  
  
  
  
    <> 
  
  
  
  
       
  
  
  
  
      Focus the input 
  
  
  
  
     
  
  
  
  
  ); 
  
  
  
  
} 
 
 
 

我們可能會封裝一些邏輯，自定義一些屬性，暴露給父元素，那么我們就會用到useImperativeHandle和forwardRef。

 
 
 
 
  
  
  
  
function FancyInput(props, pref) { 
  
  
  
  
  const inputRef = useRef(); 
  
  
  
  
  useImperativeHandle(ref, () => ({ 
  
  
  
  
    focus: () => { 
  
  
  
  
      inputRef.current.focus(); 
  
  
  
  
    } 
  
  
  
  
  })); 
  
  
  
  
  return ; 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
FancyInput = forwardRef(FancyInput); 
  
  
  
  
 
  
  
  
  
  
  
  
  
  
// 父組件可以直接調(diào)用inputRef.current.focus() 
 
 
 

因為 ref 對象不會把當前 ref 值的變化通知給我們，所以我們必須通過useState和useCallback實現(xiàn)。

 
 
 
 
  
  
  
  
function MeasureExample() { 
  
  
  
  
  const [height, setHeight] = useState(0); 
  
  
  
  
 
  
  
  
  
  const measuredRef = useCallback((node) => { 
  
  
  
  
    if (node !== null) { 
  
  
  
  
      setHeight(node.getBoundingClientRect().height); 
  
  
  
  
    } 
  
  
  
  
  }, []); 
  
  
  
  
 
  
  
  
  
  return ( 
  
  
  
  
    <> 
  
  
  
  
      Hello, world 
  
  
  
  
      
The above header is {Math.round(height)}px tall
 
  
  
  
  
     
  
  
  
  
  ); 
  
  
  
  
} 
 
 
 

自定義hook

在代碼中，我們會有一些共用的邏輯，我們可以抽離出來比如自定義的防抖節(jié)流，自定義 Hook 是一個函數(shù)，其名稱以 “use” 開頭，函數(shù)內(nèi)部可以調(diào)用其他的 Hook。

 
 
 
 
  
  
  
  
const useDebounce = (fn, ms = 30, deps = []) => { 
  
  
  
  
  let timeout = useRef(); 
  
  
  
  
 
  
  
  
  
  useEffect(() => { 
  
  
  
  
    if (timeout.current) clearTimeout(timeout.current); 
  
  
  
  
    timeout.current = setTimeout(() => { 
  
  
  
  
      fn(); 
  
  
  
  
    }, ms); 
  
  
  
  
  }, deps); 
  
  
  
  
 
  
  
  
  
  const cancel = () => { 
  
  
  
  
    clearTimeout(timeout.current); 
  
  
  
  
    timeout = null; 
  
  
  
  
  }; 
  
  
  
  
  return [cancel]; 
  
  
  
  
}; 
  
  
  
  
 
  
  
  
  
export default useDebounce; 
  
  
  
  
const Home = (props) => { 
  
  
  
  
  const [a, setA] = useState(0); 
  
  
  
  
  const [b, setB] = useState(0); 
  
  
  
  
  const [cancel] = useDebounce( 
  
  
  
  
    () => { 
  
  
  
  
      setB(a); 
  
  
  
  
    }, 
  
  
  
  
    2000, 
  
  
  
  
    [a] 
  
  
  
  
  ); 
  
  
  
  
 
  
  
  
  
  const changeIpt = (e) => { 
  
  
  
  
    setA(e.target.value); 
  
  
  
  
  }; 
  
  
  
  
 
  
  
  
  
  return ( 
  
  
  
  
    
 
  
  
  
  
       
  
  
  
  
       {a}