- Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。
- Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
- Hook 使你在无需修改组件结构的情况下复用状态逻辑。 这使得在组件间或社区内共享 Hook 变得更便捷。
- Hook 将组件中相互关联的部分拆分成更小的函数(比如设置订阅或请求数据),而并非强制按照生命周期划分。
- 常用的hook
useState
useEffect
useContext
useReducer - HOOK的学习
- 使用场景:React Hooks 实现响应式布局,监听
resize
事件时,触发useEffect
改变数据。 -
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 }; }
Hook学习日记以及使用场景
最新推荐文章于 2021-07-19 20:44:04 发布