Hook学习日记以及使用场景

1. Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。
2. Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
3. Hook 使你在无需修改组件结构的情况下复用状态逻辑。 这使得在组件间或社区内共享 Hook 变得更便捷。
4. Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。
5. 常用的hook
        useState
        useEffect
        useContext  
        useReducer
6. HOOK的学习
7. 使用场景：React Hooks 实现响应式布局，监听resize事件时，触发useEffect改变数据。

8. const useViewport = () => {
     const [width, setWidth] = React.useState(window.innerWidth);
   
     React.useEffect(() => {
       const handleWindowResize = () => setWidth(window.innerWidth);
       window.addEventListener("resize", handleWindowResize);
       return () => window.removeEventListener("resize", handleWindowResize);
     }, []);
   
     return { width };
   }