# react - hook常用

react - hook常用

1. useState() : 在函数中设置值和改变值的
2. useContext()： 多个组件之间共享数据的
3. useReducer ()：类似于Redux
4. useEffect()：类似与监听器（区别在于传参与不传参来监听是否执行回调）
5. useCallback:缓存函数
6. useMemo:缓存值
7. useRef:访问DOM
8. useImperativeHandle:使用子组件暴露的值/方法
9. useLayoutEffect:完成副作用操作，会阻塞浏览器绘制

1.useState()

const Index = () => {
  const [count, setCount] = useState(0);
  const [obj, setObj] = useState({ id: 1 });
  return (
    <>
      {/* 普通更新 */}
      <div>count：{count}</div>
      <button onClick={() => setCount(count + 1)}>add</button>

      {/* 函数式更新 */}
      <div>obj：{JSON.stringify(obj)}</div>
      <button
        onClick={() =>
          setObj((prevObj) => ({ ...prevObj, ...{ id: 2, name: "张三" } }))
        }
      >
        merge
      </button>
    </>
  );
};

2.useContext()

import React, { useContext } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const AppContext = React.createContext({});

const Navbar = () => {
  const { username } = useContext(AppContext)

  return (
    <div className="navbar">
      <p>AwesomeSite</p>
      <p>{username}</p>
    </div>
  )
}

const Messages = () => {
  const { username } = useContext(AppContext)

  return (
    <div className="messages">
      <h1>Messages</h1>
      <p>1 message for {username}</p>
      <p className="message">useContext is awesome!</p>
    </div>
  )
}

function App() {
  return (
    <AppContext.Provider value={{
      username: 'superawesome'
    }}>
      <div className="App">
        <Navbar />
        <Messages />
      </div>
    </AppContext.Provider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

3. useReducer ()

const initialState = [
  { id: 1, name: "张三" },
  { id: 2, name: "李四" }
];

const reducer = (state: any, { type, payload }: any) => {
  switch (type) {
    case "add":
      return [...state, payload];
    case "remove":
      return state.filter((item: any) => item.id !== payload.id);
    case "update":
      return state.map((item: any) =>
        item.id === payload.id ? { ...item, ...payload } : item
      );
    case "clear":
      return [];
    default:
      throw new Error();
  }
};

const List = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      List: {JSON.stringify(state)}
      <button
        onClick={() =>
          dispatch({ type: "add", payload: { id: 3, name: "周五" } })
        }
      >
        add
      </button>

      <button onClick={() => dispatch({ type: "remove", payload: { id: 1 } })}>
        remove
      </button>

      <button
        onClick={() =>
          dispatch({ type: "update", payload: { id: 2, name: "李四-update" } })
        }
      >
        update
      </button>
      
      <button onClick={() => dispatch({ type: "clear" })}>clear</button>
    </>
  );
};

4 useEffect()

useEffect(
  () => {
    // 这里的代码块 等价于 componentDidMount
    // do something...

    // return的写法 等价于 componentWillUnmount 
    return () => {
       // do something...
    };
  },
  // 依赖列表，当依赖的值有变更时候，执行副作用函数，等价于 componentDidUpdate
  [ xxx，obj.xxx ]
);

• 当数组为空 [ ]，表示不会应为页面的状态改变而执行回调方法【即仅在初始化时执行，componentDidMount】，

• 当这个参数不传递，表示页面的任何状态一旦变更都会执行回调方法

• 当数组非空，数组里的值一旦有变化，就会执行回调方法

5. useCallback:缓存函数

// 除非 `a` 或 `b` 改变，否则不会变
const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);```
## 6. useMemo:缓存值

```javascript
// 不管页面 render 几次，时间戳都不会被改变，因为已经被被缓存了，除非依赖改变。
const getNumUseMemo = useMemo(() => {
  return `${+new Date()}`;
}, []);
// ...

7. useRef:访问dom

const Index = () => {
  const inputEl = useRef(null);
  const handleFocus = () => {
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={handleFocus}>Focus</button>
    </>
  );
};

8. useImperativeHandle:使用子组件暴露的值/方法

const Index = () => {
  const inputEl = useRef();
  useEffect(() => {
    console.log(inputEl.current.someValue);
    // test
  }, []);

  return (
    <>
      <Child ref={inputEl} />
      <button onClick={() => inputEl.current.setValues((val) => val + 1)}>
        累加子组件的value
      </button>
    </>
  );
};

const Child = forwardRef((props, ref) => {
  const inputRef = useRef();
  const [value, setValue] = useState(0);
  useImperativeHandle(ref, () => ({
    setValue,
    someValue: "test"
  }));
  return (
    <>
      <div>child-value:{value}</div>
      <input ref={inputRef} />
    </>
  );
});

9.useLayoutEffect:完成副作用操作，会阻塞浏览器绘制

• 在所有的 DOM 变更之后同步调用effect。可以使用它来读取 DOM 布局并同步
  触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同 步刷新，也就是说它会阻塞浏览器绘制。所以尽可能使用
  useEffect 以避免阻 塞视觉更新

参考：https://segmentfault.com/a/1190000038196193