React教程(七) : 常用Hook

useState & useEffect
useState与useEffect经常一起被使用，用法简单，这里不多做介绍。以下一些概念需要搞清楚：
1）仅在函数组件的头部调用Hook。不要在循环体中、条件判断或嵌套方法中调用Hook。
https://reactjs.org/docs/hooks-rules.html
2）useState的实现就是闭包 - 在setXXX是内部方法，通过return暴露给外部使用。
3）useState通过数组+index实现state的存储，并且每次调用其内部的setXXX方法，都会重新渲染(调用ReactDOM.render)。
参考以下文章：https://zhuanlan.zhihu.com/p/94586032
4）useEffect返回方法会在组件被卸载的时候执行
如以下代码：
return () => {
// 清除订阅
subscription.unsubscribe();
};

useContext
仅仅使用createContext + useContext便可以实现全局数据共享。既在不同component中共享数据。
代码参考：
https://github.com/992990831/modernization/tree/main/context-demo

useReducer
与useContext共同使用，可以实现Flutter模式（单向数据流），也是Redux的一种替代方式。Flutter模式要点：view -> dispatch -> action -> store
代码参考：
https://github.com/992990831/modernization/tree/main/context-demo

思考：useReducer的一些功能与useState+useEffect， 何时使用useReducer？
下面的示例讲述了使用useReducer减少render次数：
Our app re-renders more than it should.
https://www.smashingmagazine.com/2020/07/custom-react-hook-fetch-cache-data/

useMemo与useCallback
某些场景下，我们希望component渲染的时候，其中的某些方法有条件地被执行，以提升性能。 此时就可以使用useMemo/useCallback
以下述代码为例，computeExpensiveValue方法只有在a或b发生变化时才会被执行，不论component是否被重新渲染。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useRef
不仅仅是createRef的替代品，还可以当作cache使用，在其中存取变量，跨渲染周期使用其中存储的变量。
代码参考：https://www.smashingmagazine.com/2020/07/custom-react-hook-fetch-cache-data/