1. useLayoutEffect

useLayoutEffct與useEffect使用方式一致，都可以執(zhí)行副作用和清理操作。唯一的不同是執(zhí)行時(shí)機(jī)。useEffect不回阻塞瀏覽的繪制任務(wù)，頁(yè)面更新后執(zhí)行。useLayoutEffect跟componentDidMount和componentDidUpdate類似，會(huì)阻塞瀏覽器的繪制任務(wù)，如果任務(wù)執(zhí)行時(shí)間過長(zhǎng)，會(huì)造成頁(yè)面空白。

使用場(chǎng)景： 根據(jù)ui執(zhí)行DOM操作，絕大多數(shù)情況下使用useEffect是一個(gè)更好的選擇。useLayoutEffect會(huì)在頁(yè)面渲染前執(zhí)行，保證渲染出來的是最終效果。如果使用了useEffect很可能會(huì)因?yàn)殇秩玖?次而出現(xiàn)抖動(dòng)。

2. 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的contextvalue值。

useContext的參數(shù)必須是context對(duì)象本身：

• 正確： useContext(MyContext)
• 錯(cuò)誤： useContext(MyContext.Consumer)
• 錯(cuò)誤： useContext(MyContext.Provider)

useContext(MyContext)相當(dāng)于class組件中的static contextType = MyContext或者<MyContext.Consumer>

調(diào)用了useContext的組件總會(huì)在context的值發(fā)生變化時(shí)重新渲染。

3. useReducer

useReducer用法跟Redux非常相似。當(dāng)state的計(jì)算邏輯比較復(fù)雜或者需要根據(jù)以前的值計(jì)算新的值時(shí)，使用這個(gè)Hook會(huì)比useState更好。

function init(initialCount) {
  return {count: initialCount};
}

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      return init(action.payload);
    default:
      throw new Error();
  }
}

function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>
        Reset
      </button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </>
  );
}

4. useCallback / useMemo / React.memo

useCallback和useMemo的設(shè)計(jì)初衷時(shí)用來做性能優(yōu)化的。

傳統(tǒng)onClick方法，每次重新渲染都會(huì)重新綁定事件，解決方式是使用bind或者箭頭函數(shù)。同樣函數(shù)組件也有這個(gè)問題，React給出的方案是useCallback Hook。它會(huì)返回相同的引用，避免子組件進(jìn)行無意義的重復(fù)渲染。

useCallback緩存的是方法的引用，

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

  const memoizedHandleClick = useCallback(
    () => console.log(`Click happened with dependency: ${count}`), [count],
  ); 
  return <Button onClick={memoizedHandleClick}>Click Me</Button>;
}

而useMemo緩存的則是方法的返回值。

function Parent({ a, b }) {
  // 當(dāng) a 改變時(shí)才會(huì)重新渲染
  const child1 = useMemo(() => <Child1 a={a} />, [a]);
  // 當(dāng) b 改變時(shí)才會(huì)重新渲染
  const child2 = useMemo(() => <Child2 b= />, [b]);
  return (
    <>
      {child1}
      {child2}
    </>
  )
}

如果想實(shí)現(xiàn)class Component的shouldComponentUpdate方法，可以使用React.memo方法，區(qū)別是它只能比較props不能比較state。

5. useRef

Class Component獲取ref的方式如下：

class MyComponent extends React.Component {
  constrctor(props) {
    super(props)
    this.myRef = React.createRef()
  }
  componentDidMount() {
    this.myRef.current.focus()
  }
  render() {
    return (
        <input ref={this.myRef} type="text" />
    )
  }
}

Hook實(shí)現(xiàn)方式:

function MyComponent() {
  const myRef = useRef(null)
  
  useEffect(() => {
    myRef.current.focus()
  }, [])
  return <input ref={myRef} type="text" />
}

useRef返回一個(gè)普通的js對(duì)象，可以將任意類型數(shù)據(jù)存放到current屬性里面，就像使用實(shí)例化this一樣。另外一個(gè)使用場(chǎng)景是獲取previous props或previous state:

function Counter() {
  const [count, setCount] = useState(0)
  
  const previousRef = useRef()
  useEffect(() => {
    previousRef.current = count
  })
  const previousCount = previousRef.current
  
  return <h1> Now: { count }, Before: { previousCount } </h1>
}

6. 自定義hooks

自定義Hook可以解決復(fù)用組件內(nèi)帶邏輯的部分。

自定義Hook是一個(gè)函數(shù)，是以use開頭的，函數(shù)內(nèi)部可以調(diào)用其他Hook。

• 自定義Hook返回在線狀態(tài)(true or false)

function useFriendStatus(friendId) {
  const [isOnline, setIsOnline] = useState(null)
  
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline)
    }
    
    ChatAPI.subscribeToFriendStatus(friendId, handleStatusChange)
  
    return () => {
      chatAPI.unsubscrbeToFriendStatus(friendId, handleStatusChange)
    }
  })
  return isOnline
}

• 使用該自定義Hook

  • 根據(jù)在線狀態(tài)顯示在線 離線

    function friendStatus(props) {
      const isOnline = useFreindStatus(props.friend.id)
      
        return isOnline ? 'online' : 'offline'
    }
    

  • 顯示具體friend信息

    function friendInfo(props) {
      const isOnline = useFriendStatus(props.friend.id)
      
      return (
        <li style={isOnline ? 'green' : 'gray'}>
            { props.friend.name }
        </li>
      )
    }
    

7.hooks概覽

• 基礎(chǔ) Hook
  • useState
  • useEffect
  • useContext
• 額外的 Hook
  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeHandle
  • useLayoutEffect
  • useDebugValue