浅尝React Hooks

Posted 2020-11-25 lixiang-web

Hooks的理解： 1. Wiki: 1) In computer programming, the term hooking covers a range of techniques used to alter or augment the behavior of an operating system, of applications, or of other software components by intercepting function calls or messages or events passed between software components. 2) Code that handles such intercepted function calls, events or messages is called a hook; 2. 通俗： 1）Hook(钩子)： 通过拦截软件、调用系统内部函数和消息通信，来增强原有功能的技术； React Hooks: 1. React 16.8发布以来最吸引人的特性之一; 2.出现的原因： 1)项目中存有一大堆组件，这些组件各自都有拥有的自己的状态; 2)想要重用有些特定的带状态的逻辑，需要大幅度重构应用； 3)使用React Hooks，抽离出这些带状态的逻辑代码； 4)这样更利于重用、而且更易于进行测试和管理 3.影响： 1) React Hooks, 可在函数式组件中实现之前在带状态组件中能做到的任何事; 2)能够更灵活地实现应用代码 React Hooks 在实际项目中到底怎么使用 ？ 一. 状态管理 1. 对于业务性组件来说，状态管理肯定是不可避免的； 2.以前: 1) Class组件来管理业务逻辑; 2)或者使用redux来全局管理状态； 3.现在: 1)利用React Hooks新提供的State Hook来处理状态; 2)针对已经写好的Class组件，可以利用State Hook很好地进行重构下来尝试将它重构成函数式组件： 4. 上述代码解析： 1) 首先使用useState api 来声明一个内部状态; 2)接着声明一个新的状态变量state，以及它的setter方法; 3)上述代码中使用state这个变量，是为了减少重构的工作量； 4)可以单独将每个独立的状态提取出来使用, 例如：const [userName, setUserName] = useState("laura"); 5)在组件内部，可以使用这个内部状态来处理业务逻辑； 6)由于是函数式组件的写法，因此也避免了很多this绑定，而且这部分逻辑在后续使用的过程中也可一抽离出来进行重用 注意: 当使用set方法的时候，旧的状态是无法自动merge到新的状态中去的； 如果提取的状态是个对象，且有多个属性时，需要使用如下语法进行状态更新 setState({ ...state, userName: event.target.value }) 二. 生命周期管理 1. 利用声明周期函数，可以控制整个组件的加载、更新、和卸载; 2. React Hooks提供了Effect钩子, 使得在函数组件中也可以实现这些功能; 3. 例子：利用Effect钩子实现原本在Class组件中的各个声明周期方法 4. 代码解析： 1)利用副作用钩子很好的实现了原本的声明周期； 2)通常情况，利用组件的声明周期去获取数据、操作DOM等，这些操作叫做做副作用(side effect）； 3)副作用逻辑一般都比较复杂，也是bug频发的地段; 4)所以我们可以针对每一段逻辑单独使用一个Effect钩子，便于后期维护和调试。 三. useEffect的使用方法 -- 需传递两个参数 参数1: 回调函数 1. 会在每次组件渲染后执行； 2. 包括初始化渲染以及每次更新时 参数2: 状态依赖项(数组形式) 1. 一旦检测到依赖项数据变动，组件会更新； 并且回调函数都会被再次执行一遍；实现componentDidUpdate的功能； 2.如果你传入一个空依赖，就能实现原来componentDidMount的效果，即只会执行一次； 3.回调函数中如果返回的是闭包，这个返回的闭包函数将会在组件重新渲染前执行，所以可以在这个位置做一些清理操作，从而实现componentWillUnmount的功能。 注意：componentWillMount和componentWillUpdate两个生命周期方法在新版本的React中已经不推荐使用了 四. 自定义Hook 1. 重用和抽象一直都是编程中要解决的问题; 2. 封装想要的Hook, 从而实现代码逻辑的重用和抽象; 3. 自定义Hook的方法： 1)包装一个自定义函数; 2)根据功能将其状态和对应的effect逻辑封装进去 4. 代码解析: 1)封装一个请求数据的Hook 2)使用方法跟其他Hook类似，直接调用即可 注意: 1)不要在循环, 条件或者嵌套函数中调用Hook, 必须始终在React函数的顶层使用hook； 原因：React需要利用调用顺序来正确更新相应的状态，以及调用相应的钩子函数， 一旦在循环条件或者条件分支语句中调用Hook，就很容易导致调用顺序的不一致性，从而产生难以预料的后果 2)只能在React函数是组件或者自定义Hook中使用Hook; 为了防止无意中破坏这些规则，可以安装一个eslint插件 npm installeslint-plugin-react-hooks --save-dev 并在配置文件中使用它 这样一来，一旦违反上述这些原则，就会获得相应的提示 本文介绍了React Hook的使用方式，并通过几个简单的例子演示了如何在函数式组件中进行状态管理和生命周期管理。 官方目前提供了很多基础的Hook，如useContext, useReducer, useMemo等，大家可以酌情在项目中使用。