文章参考: Hook API 索引
普通Hook（常用）
useState、useEffect
useContext
前言：在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。
创建一个Context对象，设置一个默认值Tom
const ThemeContext = React.createContext('Tom');
获取Context对象的内容，会向上找 Context.Provider的值
const theme = useContext(ThemeContext);
把如下代码与 Context.Provider 放在一起
// Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。
// 为当前的 theme 创建一个 context（“Tom”为默认值）。
const ThemeContext = React.createContext('Tom');
function App () {
// 使用一个 Provider 来将当前的 theme 传递给以下的组件树。
// 无论多深，任何组件都能读取这个值。
// 在这个例子中，我们将 “Jerry” 作为当前的值传递下去。
return (
<ThemeContext.Provider value="Jerry">
<Toolbar />
</ThemeContext.Provider>
);
}
// 中间的组件再也不必指明往下传递 theme 了。
function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}
function ThemedButton () {
// 指定 contextType 读取当前的 theme context。
// React 会往上找到最近的 theme Provider，然后使用它的值。
// 在这个例子中，当前的 theme 值为 “Jerry”。
const theme = useContext(ThemeContext);
render() {
return <Button theme={theme} />;
}
}
其他Hook （不常用）
useReducer
const [state, dispatch] = useReducer(reducer, initialArg, init);
useState的替代方案。在state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state的情况下，useReducer 会比 useState 更适用
- reducer
它接收一个形如(state, action) => newState 的 reducer函数，参数是当前的state值（state），和操作配置（action），最后返回一个新的state值 - initialArg
state的初始值 - init
这是一个可选值，可以用来惰性提供初始状态。这意味着我们可以使用使用一个 init 函数来计算初始状态/值，而不是显式的提供值。如果初始值可能会不一样，这会很方便，最后会用计算的值来代替初始值。
实现一个计数器
// 对初始值进行处理
function init(initialCount) {
return {count: initialCount};
}
// reducer函数，根据action配置处理state值
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: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
</>
);
}
【注】跳过 dispatch
如果 Reducer Hook 的返回值与当前 state 相同，React 将跳过子组件的渲染及副作用的执行。（React 使用Object.is比较算法）
useReducer源码解释
// state的处理配置
function todosReducer(state, action) {
switch (action.type) {
case 'add':
return [...state, {
text: action.text,
completed: false
}];
// ... other actions ...
default:
return state;
}
}
// useReducer源码
function useReducer(reducer, initialState) {
const [state, setState] = useState(initialState); // 设置staste，传入初始值
function dispatch(action) { // useReaducer的第二个返回值，参数是state的配置对象
const nextState = reducer(state, action); // 调用传入的state处理函数，传入state的初始值和配置，返回经过处理的后的state值
setState(nextState); // 更新state值
}
return [state, dispatch]; // 返回设置的state值，和更新state的回调函数
}
const [todos, dispatch] = useReducer(todosReducer, []);
useCallback
useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。
useMemo
返回一个 memoized 值。（memoization的技巧在于将计算过的结果『缓存』下来,避免重复计算带来的成本）
把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。
传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于 useEffect 的适用范畴，而不是 useMemo。
如果没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值。
你可以把 useMemo 作为性能优化的手段，但不要把它当成语义上的保证。将来，React 可能会选择“遗忘”以前的一些 memoized 值，并在下次渲染时重新计算它们，比如为离屏组件释放内存。先编写在没有 useMemo 的情况下也可以执行的代码 —— 之后再在你的代码中添加 useMemo，以达到优化性能的目的。
useRef
useRef返回一个可变的 ref 对象
一个常见的用例便是命令式地访问子组件：
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>
</>
);
}
返回的ref对象，挂载到节点上，对象的指向就会变成该节点
