皮皮网

1.为何要使用React Hooks？
2.译值得推荐的钩t钩十大React Hook 库
3.什么是react生命周期和生命周期钩子函数？
4.React Hooks —— useEffect 由浅入深
5.React Hook
6.如何理解钩子函数

为何要使用React Hooks？

       åœ¨äº†è§£React Hooks之前，我们必须先知道React的函数组件性质以及的函数组件为什么要用Hooks。

        大伙儿都知道，无组件不React，而React的组件又分为类式组件和函数式组件，为什么函数式组件大受React开发者的推广？

        首先我们从源码的角度来简单谈一下类式组件和函数式组件的区别：

        定义类组件时，我们必须继承React.Component

        同时，它具有一个render函数

        咱们见好就收，毕竟具体操作需要涉及源码，不是一时半会解释的清的。那么render加载组件时，发生了什么？

        1.根据组件标签，找到组件

        2.由于是类式组件，创建新的实例，并通过该实例调用到原型上的render方法

        3.将虚拟Dom转化为真实DOM

        类式组件被定义为复杂的组件，这不是React所希望的，React想要的组件是纯函数组成的管道，那么便引出了作为简单组件的函数组件。

        而函数组件作为一个函数，是没有继承React.Component的，他只需要两步 1.找到组件 2.渲染组件 ，所以也就 不存在生命周期，以及状态及this。

        这就意味着，函数组件实现有关state的管理，需要借助redux，秉承redux能不用就不用的准则（其实有的时候还蛮香的，全局管理方便），往往会另功能简单的React组件变得笨重。

        于是React团队自.8版本以来，推出了稳定的React HOOKS来解决上述问题。

        React约定钩子的前缀为use，所以需要自定义钩子时，一般使用use为前缀创建钩子。除此之外，React默认提供了四种钩子：

        1）useState

        相当于一种静态声明，目的是引入状态，此时的钩子保存状态。useState()接收函数状态的初始值，具有两个参数，第一个为状态变量，第二个为改变状态的方法，比如const [number,setNumber] = useState(0)

        2)useEffect

        副作用钩子，用来替代生命周期，最常见是向服务器请求数据

        useEffect()作为常用的钩子之一，接收两个参数，第一个参数是函数，第二个参数是一个数组，给出依赖项，数组里的值代表需要监测的对象。

        问题来了，生命周期那里体现？

        当组件参数发生改变时，useEffect()就会执行。组件第一次渲染时，useEffect()也会执行。是不是相当于生命周期中的 componentDidMount() 呢？而useEffect()下的return，一般写在第一个参数的异步操作后，相当于 componentWillUnmount() ，在组件卸载前执行，做收尾工作。

        3）useReducer

        属于action钩子，useReducer()将算出新的state，返回一个数组。例如const [state, dispatch] = useReducer(ReducerFunc, initState)

        第一个值是当前状态值，第二个值是发送action的dispatch。与Redux的Reducer一样，能够共享状态，但是不同之处是没法提供中间件和时间旅行(time travel)。

        4)useContext

        共享状态的一个钩子，在组件外部建立一个Context，包裹组件时，可以将被包裹组件的状态共享给组件内部调用的其他组件，即：

        1.外部建立Context()

        2.包裹含有状态的组件1

        3.在其他函数组件内部调用该Context()时，可以将组件1的状态共享

        但是有一点需要注意的是，使用useContext进行的数据流管理，每当context更新时，所有 使用 到该context的组件都会重新渲染。所以需要方法对useContext()进行优化，减少不必要的更新，优化方法可以参考： 如何优雅地处理使用React Context 导致的不必要渲染问题？

        除此之外还有一些自带的钩子，比如：

        5)useCallback和useMemo

        可以用做React性能优化

        react很烦，一但更新数据，render依次diff刷新节点，拦都拦不住。useCallback和useMemo就是拦住他刷新的方法。

        假设React组件中有个button，同时声明了click方法，每次render时，button和click方法都会重新render。于是可以使用useCallback()，避免组件重复无意义的渲染。

        比如：

        原因是缓存了相同的引用，以此避免了无效render。

        useMemo参数用法一致，不过useCallback一般用于缓存函数，useMemo用于缓存计算结果之类。

        useCallback(fn, deps)相当于useMemo(()=>fn, deps)

        *可以推出，使用useCallback实现useMemo的方法：

        useMemo(fun,...deps)  

        useCallback(fun(...deps), [...deps])

        这两者是等价的。

译值得推荐的十大React Hook 库

       React Hook的出现为React开发者带来了革命性的变化，其在社区中的源码普及速度令人瞩目。随着时间的钩t钩推移，支持React Hook的源码库数量显著增长，使得开发者在编写代码时更加轻松、钩t钩高效。源码libnl源码下载本文将聚焦于值得推荐的钩t钩十大React Hook库，旨在帮助开发者提高代码质量，源码优化可读性、钩t钩维护性，源码并减少重复编码。钩t钩

       让我们逐一探索这十款库的源码独特功能及其在实际应用中的优势。

       1. use-ponentWillMount`: 在组件挂载之前被调用，钩t钩棋牌游戏源码 房卡此时组件还没有生成实际的源码DOM，处于虚拟DOM的钩t钩状态。在这个阶段可以进行一些数据处理，比如查询或准备页面渲染所需的数据。

        - `componentDidMount`: 在组件挂载完成之后被调用，此时页面已经生成实际的DOM。可以在这个阶段操作页面上的DOM元素，例如通过`document.getElementById`获取DOM对象，或者加载如echarts图表等。

        - `componentWillUnmount`: 在组件即将被卸载之前调用。在这个方法中可以执行一些清理工作，例如清除定时器或解绑事件监听器。在线H站源码下载

React Hooks —— useEffect 由浅入深

       React Hooks: 深入理解 useEffect 的生命周期与优化</

       在React中，useEffect</钩子是一个强大的工具，用于在组件渲染后执行副作用操作，如DOM操作、数据获取和事件监听。它确保在视图更新后执行，保持组件逻辑清晰。

       首先，让我们了解它的基本原理。每次组件渲染，useEffect中的代码会在视图更新后执行，比如在控制视频播放/暂停组件中，直接用别人的源码我们学习如何正确地处理DOM操作，避免使用顶层ref可能导致的问题。

       重要的是理解React对useEffect的执行策略。默认情况下，它在组件挂载、更新和卸载时运行，但React 引入了更严格的规范，确保Effect代码仅在必要时执行。这有助于性能优化，

React Hook

        react .8 以后加上了 react hook，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。.8之前，react组件可以分为类组件和函数组件。

        我们为什么要拥抱react hook？由于类组件存在以下几点问题：

        下面逐一介绍官方提供的hook API。

        1.useState()

        作用：返回一个状态以及能修改这个状态的setter，在其他语言称为元组（tuple），一旦mount之后只能通过这个setter修改这个状态。

        2.useEffect(callback, arr)

        作用：处理函数组件中的副作用，如异步操作、延迟操作等。useEffect有两个参数，callback和数组依赖项，无arr时相当于componentDidMount生命周期，有arr时相当componentDidMount和componentDidUpdata生命周期。如果callback中有return，则相当于componentWillUnmount。

        3.useContext

        作用：跨组件共享数据钩子，使用可分为三步：

        4.useReducer

        作用：用于管理复杂的数据结构（useState一般用于管理扁平结构的状态），基本实现了redux的核心功能。 useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。

        5.useMemo、useCallback

        这俩个Api与性能优化有关。react中，性能的优化点在于：

        基于上面的两点，我们通常的解决方案是：使用immutable进行比较，在不相等的时候调用setState；在shouldComponentUpdate中判断前后的props和state，如果没有变化，则返回false来阻止更新。

        在hooks出来之后，我们能够使用function的形式来创建包含内部state的组件。但是，使用function的形式，失去了上面的shouldComponentUpdate，我们无法通过判断前后状态来决定是否更新。而且，在函数组件中，react不再区分mount和update两个状态，这意味着函数组件的每一次调用都会执行其内部的所有逻辑，那么会带来较大的性能损耗。因此useMemo 和useCallback就是解决性能问题的杀手锏。

        useCallback和useMemo的参数跟useEffect一致。useMemo和useCallback都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行；并且这两个hooks都返回缓存的值，useMemo返回缓存的变量，useCallback返回缓存的函数。

        通过一个例子来看useMemo的作用：

        不使用useMemo，无论count还是val改变都会执行expensive()

        使用useMemo，只有在count发生改变使才会会执行expensive()

        useCallback跟useMemo比较类似，但是使用场景不同：比如有一个父组件，其中包含子组件，子组件接收一个函数作为props；通常而言，如果父组件更新了，子组件也会执行更新；但是大多数场景下，更新是没有必要的，我们可以借助useCallback来返回函数，然后把这个函数作为props传递给子组件；这样，子组件就能避免不必要的更新。

        6.useRef

        useRef是一个方法，返回一个可变的 ref 对象；其 .current 属性被初始化为传入的参数（initialValue）；可以保存任何类型的值:dom、对象等任何可变值；返回的 ref 对象在组件的整个生命周期内保持不变；修改 ref 的值是不会引发组件的重新 render 。

        useRef非常常用的一个操作，访问DOM节点，对DOM进行操作，监听事件等等，如下：

        除了传统的用法之外,它还可以“跨渲染周期”保存数据。

        在上面的例子中，点击了 打印like 按钮后，连续点击数字按钮，会发现2s后 likeRef.current 打印出，而 like 打印出1。

        因为，在任意一次渲染中，props和 state 是始终保持不变的，如果props和state在任意不同渲染中是相互独立的话，那么使用到他们的任何值也是独立的。所以onButtonClick时拿到的时未点击数字按钮时的 like 值。

        而ref 在所有 render 都保持着唯一的引用，因此所有的对 ref 的赋值或者取值拿到的都是一个最终的状态，而不会存在隔离。

        7.useImperativeHandle

        当userRef用于一个组件时，useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值；如果不使用，父组件的ref(chidlRef)访问不到任何值（childRef.current==null）；且 useImperativeHandle 应当与 forwardRef 一起使用。

        8.useLayoutEffect

        用法与useEffect 相同，但它会在所有的 DOM 变更之后同步调用（立即执行）。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。由于会在浏览器进行任何绘制之前运行完成，阻塞了浏览器的绘制。

        使用场景：当useEffect里面的操作需要处理DOM,并且会改变页面的样式,就需要用这个,否则可能会出现闪屏问题。

        9.useDebugValue

        useDebugValue 用于在 React 开发者工具中显示 自定义 Hook 的标签。

        useDebugValue 接受一个格式化函数作为可选的第二个参数。该函数只有在 Hook 被检查时才会被调用。它接受 debug 值作为参数，并且会返回一个格式化的显示值。

如何理解钩子函数

       对于钩子函数，我起初对此称呼感到困惑，尽管在开发过程中并不需要深入了解，微信开放平台源码但这个问题一直困扰了我很久。今天，我查阅了相关资料，并对此进行了一些总结。

       钩子函数是许多开发语言中都会涉及的一个概念。简单来说，它是一种系统在处理消息时预先设置好的函数。打个比喻，就像某个周期性的任务由系统自动执行，我们如何在这个周期中人为地干预其进程呢？下面这张图可以更直观地说明这一点。

       关于钩子函数，以下是一些基本概念：

       1. 它是一种函数，当系统消息触发时，系统会自动调用它。

       2. 它不是由用户直接触发的。

       3. 使用钩子函数时，我们只需直接编写函数体。

       钩子函数的名称是固定的，当系统消息触发时，系统会自动调用相应的钩子函数。

       以react的componentWillUpdate函数为例，用户只需编写componentWillUpdate的函数体。当组件状态发生改变，需要更新时，系统会自动调用componentWillUpdate函数。

       此外，还有一些常用的钩子函数，如vue生命周期的几个钩子函数等。

React 函数式组件和 React Hooks

       本文将解析 React 中函数式组件和 Hooks 的概念与应用。函数式组件通过引入 Hooks 实现了状态和生命周期功能，简化了代码。

       Hooks 是一类特殊的函数，为函数式组件提供了功能增强，使其具备类组件的特性。

       React 需要 Hooks 概念的主要原因是解决类组件在状态管理和生命周期逻辑上的局限性。通过引入 Hooks，可以实现组件逻辑的清晰化，避免类组件中混杂多任务。

       之前函数式组件存在的问题是无法存储状态，而 Hooks 则解决了这一问题。类组件的生命周期钩子函数逻辑混乱，而 Hooks 逻辑复用更佳，使得组件设计更加灵活。

       引入 Hooks 使得函数式组件功能增强，解决了组件初始化和更新时重新执行的问题，同时使得组件状态管理更加高效。

       Hooks 的优点在于逻辑复用性强，提高了代码的可读性和可维护性。相比高阶组件，Hooks 在实现功能的同时避免了引入的复杂性。

       常用 Hooks 函数包括 useState, useEffect, useRef, useContext 和 useReducer 等。这些函数分别提供了不同场景下的功能，如状态管理、副作用处理、DOM 元素访问、数据共享和复杂状态管理。

       Hooks 的使用遵循特定规则，以确保组件状态的正确管理。例如，不能在 if 判断中使用 Hooks，以保持组件状态的连续性和一致性。

       综上所述，引入 Hooks 是 React 进行架构变革的重要一步，它不仅简化了组件逻辑，还提高了代码的可读性和复用性，使得函数式组件能够具备与类组件相近的功能。通过合理使用 Hooks，开发者可以构建出更加高效、灵活的组件化应用。