[React] Hooks usage

[plh97]

useState

useState 唯一的作用就是为了替代原本class类组件的繁杂用法,同时为了推广他们的function组件,

需要注意的是, 第二个参数 setCount 他相当于一个 dispatch 函数, 我们可以 dispatch(count+1), 也可以 dispatch(count => count+1), 如果 dispatch 一个函数, 那这个函数仅仅只会执行一次.

import React, { useState } from 'react';

function Example() {
 // Declare a new state variable, which we'll call "count"
 const [count, setCount] = useState(0);

 return (
   <div>
     <p>You clicked {count} times</p>
     <button onClick={() => setCount(count + 1)}>
       Click me
     </button>
   </div>
 );
}

useEffect 副作用钩子

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source],
);

useContext

如果你知道provide就是通过context才使得全局可共享状态,可跨组件通讯, 那应该就知道useContext是干嘛的了..

useReducer

简单来说,他就是useState的替代方案,如果你用过redux,一定不陌生,redux的作用不就是将原本放在state中的状态搬到全局了么.
是不是比原来繁琐的redux, connect , dispatch(action())要简单多了,,,

const initialState = {count: 0};

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

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

shouldComponentUpdate mock in hooks

The useMemo Hook lets you cache calculations between multiple renders by “remembering” the previous computation: 如果a,b没有变, 则跳过 useMemo

useMemo(() => computeExpensiveValue(a, b), [a, b]);

ComponentWillUnmount mock in hooks

如果 第二个参数 是 [], 则不会触发更新的生命周期, 如果第二个参数有值, 则会根据第二个参数值是否变更, 从而触发更新生命周期

useEffect(() => {
	console.log('componentDidMount'); // componentDidUpdate
  return () => {
    console.log('componentWillUnmount');
  }
}, []);

useEffect 与 useLayoutEffect

useEffect 是异步的, 不会阻塞屏幕更新, useLayoutEffect 是同步, 仅仅当页面频繁闪烁, 才用. 但是这也会阻塞页面渲染.

useRef 与 createRef

• useRef 就是 ref, 只能在函数组件中使用, 她更新的时候不会重新创建, 销毁的时候会销毁, 并 ** 返回相同引用**

• createRef 每次渲染都返回新的引用

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

useCallback 和 useMemo 区别

• useCallback 用来缓存计算方法

• useMemo 用来缓存计算值