记录一些不经常使用的 hooks

useReducer 过于复杂的更改状态，可以使用 useReducer

  1. interface InitStateValue{
  2.   num: number,
  3.   hobby: object
  4. }
  6. const initialState : InitStateValue = {
  7.   num: 18,
  8.   hobby: {
  9.     ball: 'football',
  10.     eat: 'rice'
  11.   }
  12. }
  13. const reducer = (state:InitStateValue, action:{type: string, value?: string}) => {
  14.   switch(action.type){
  15.     case 'numAdd':
  16.       return {...state, num: state.num+1};
  17.     case 'changeHobby':
  18.       return {...state, hobby: {ball:'football', eat: action.value}}
  19.     default:
  20.       throw new Error();
  21.   }
  22. }
  24. const Index: React.FC = () => {
  25.   const[state, dispatch] =  useReducer(reducer, initialState)
  27.   const onInputChange = (e: React.MouseEvent<HTMLSpanElement>) => {
  28.     e.persist()
  29.     dispatch({type: 'changeHobby', value: e.target.value})
  30.   }
  32.   return (
  33.     <>
  34.         <p>age:{state.num}</p>
  35.         {
  36.           Object.keys(state.hobby).map(key=>{
  37.             return <p>{`${key}：${state.hobby[key]}`}</p>
  38.           })
  39.         }
  40.         <button onClick={() => {dispatch({type: 'numAdd'})}}>add</button>
  41.         <input type="text" onChange={(e) => {onInputChange(e)}}/>
  42.     </>
  43.   );
  44. };

useCallback 和 useMemo 这两个hook可以进行性能优化，使用方法和useEffect有些类似，但是不能处理副作用。

useMemo : 只有count发生改变时，才会重新计算count ， num 的改变不会引发 count 的重新计算

  1. const Index: React.FC = () => {
  2.   const[count, setCount] = useState(0)
  3.   const[num, setNum] = useState(0)
  5.   let data = useMemo(() => {
  6.     console.log('calculate执行')
  7.     return count * 3
  8.   },[count])
  10.   return (
  11.     <>
  12.       <p>{data}</p>
  13.       <p>num:{num}</p>
  14.       <p>count:{count}</p>
  15.       <button onClick={() => setNum(num+1)}>num add</button>
  16.       <button onClick={() => setCount(count+1)}>count add</button>
  17.     </>
  18.   );
  19. };

useCallback useCallback的使用方法和useMemo类似，但是useCallback返回的是缓存的函数。

useCallback依赖count, 当count发生改变的时候，会返回一个新的函数，useCallback不依赖num，num发生改变的时候返回的是缓存的旧函数

  1. const Index: React.FC = () => {
  2.   const[count, setCount] = useState(0)
  3.   const[num, setNum] = useState(0)
  5.   let data = useCallback(() => {
  6.     console.log('calculate执行')
  7.     return count * 3
  8.   },[count])
  10.   return (
  11.     <>
  12.       <p>{data}</p>
  13.       <p>num:{num}</p>
  14.       <p>count:{count}</p>
  15.       <button onClick={() => setNum(num+1)}>num add</button>
  16.       <button onClick={() => setCount(count+1)}>count add</button>
  17.     </>
  18.   );
  19. };

useCallback & useMemo 的关系
useCallback(fn, deps) === useMemo(() => fn, deps)

useRef 官方文档： https://zh-hans.reactjs.org/docs/hooks-reference.html#useref 可以存储任意javascript值而不仅仅是DOM引用