react hooks 的更进一步适应性使用
Hooks are a new addition in React that lets you use state and other React features without writing a class.
Hooks是JavaScript函数 , 我们需要保存状态的一致性。 尤其对于大前端来说， 如何保证。
只可以在顶层调用Hook
不要在循环，条件或嵌套函数中调用Hook。 通过遵循此规则，可以确保每次组件呈现时都以相同的顺序调用Hook。这就是React在多个useState和useEffect调用之间正确保留Hook状态的原因。
安装
ESLint Plugin
// 如果是WEBPACK自己 部署的 安装 分两步：
1. 升级 NPM 参考
2. 安装规则 参考
3. 安装 react-hooks 规则插件npm install eslint-plugin-react-hooks@next
据说React-Hooks 合理使用具有如下优势：
1. 在React函数中操作状态并与组件生命周期方法交互。
2. 重用组件状态/生命周期逻辑成为可能，状态/生命周期逻辑可以很容易地进行测试。 重用组件永远不会变得如此容易。
3. 一个更好的上下文提供者，以避免“盒套盒” 状态管理混乱。
4. 避免被臃肿的类组件吓到，不再“xx.bind（this）”，减少组件逻辑，易于维护。
5. 通过错误使用组件生命周期方法来避免潜在的性能问题和错误，不再遭受组件生命周期方法的痛苦。
6. 与第三方类的整合变得更容易，并有很多意义。
7. 节省你的时间用于思考“stats 与 原型链”。
8. 有更好的功能编程和中间件编程经验。
API将经常使用
1.使用状态（useState）：在React函数中操作状态。 2.使用效果(useEffect)：不仅仅是将组件Did Mount、组件Did Update和组件Will Unmount的组件生命周期方法结合起来。
3.使用上下文(useContext)：返回React.创建上下文作为一个值，不再是“盒模型” 状态混乱。 4.使用减速器（useReducer）：没错，ReactJS现在发送ReduxJS。 5.使用回调/使用备忘录：缓存昂贵的计算，以使渲染更快。
6.使用Ref：增强React。创建Ref()。 7.使用调试值：增强React Dev工具的方法。
传统的状态管理
1. 多状态2生命周期方法(甚至是从Props方法中获取派生状态)3事件处理程序4. react refs
我们会执行下面的流程：
1. 将类变成函数导出默认函数 （原型链）
2. 把这些原型链统一 ， 比必要的 换掉。 还有 状态。 空字符串。
3. 删除RENDER (){/body}函数的包装DIV，并保留正文代码。
4. 将所有类方法转换为纯函数。
5. 使用React Hooks API的Refact类状态使用状态()。
6. 用React Hooks API使用效果()
7. 重新考虑所有输入调整逻辑和window.add事件侦听器(‘调整大小’，this.调整输入，false。 由React.create Ref创建的Refact值与React Hooks API()使用Ref(NULL)。
传统到现在的转变：
useRef 用法：
useState 用法转变：
useEffect 效果用法：
效果用法，就是任何组件的变动都会触发。
useMemo 用法：
react 全局总揽 概念图：
我们 常规定义的 React Hooks 用来主要处理：
useAuth 登陆鉴别权限,
useEventListener 事件侦听器
useWhyDidYouUpdate 通过console 打印DOM 状态前后的改变
useDarkMode 暗黑模式
useMedia 自适应媒体播放器
useLockBodyScroll 是否允许 BODY内容超屏
useTheme 全局样式 换色
useSpring 颜色和透明度等动画
useHistory 返回浏览器记录跳转
useScript 按需加载第三方库
useKeyPress 响应按键操作
useDebounce 快速改变的值去抖动
useOnScreen 检测一个元素是否在屏幕上可见
usePrevious 获取更新前的值
useOnClickOutside 点击在特定元素外
useAnimation 缓动函数
useWindowSize 浏览器当前窗口的尺寸
useHover 监测一个鼠标是否移动到某个元素上
useLocalStorage 将state中的数据同步到localstorage
以上是 react hooks 的更进一步适应性使用 的全部内容， 来源链接： utcz.com/z/384302.html
