React Hooks究竟是什么呢？

摘要： React Hooks原理解析。

我们大部分 React 类组件可以保存状态，而函数组件不能？ 并且类组件具有生命周期，而函数组件却不能？

React 早期版本，类组件可以通过继承PureComponent来优化一些不必要的渲染，相对于函数组件，React 官网没有提供对应的方法来缓存函数组件以减少一些不必要的渲染，直接 16.6 出来的 React.memo函数。

React 16.8 新出来的Hook可以让React 函数组件具有状态，并提供类似 componentDidMount和componentDidUpdate等生命周期方法。

类被会替代吗？

Hooks不会替换类，它们只是一个你可以使用的新工具。React 团队表示他们没有计划在React中弃用类，所以如果你想继续使用它们，可以继续用。

我能体会那种总有新东西要学的感觉有多痛苦，不会就感觉咱们总是落后一样。Hooks 可以当作一个很好的新特性来使用。当然没有必要用 Hook 来重构原来的代码, React团队也建议不要这样做。

Go Go

来看看Hooks的例子,咱们先从最熟悉的开始:函数组件。

以下 OneTimeButton 是函数组件，所做的事情就是当我们点击的时候调用 sayHi 方法。

    import React from 'react';
    import { render } from 'react-dom';

    function OneTimeButton(props) {
      return (
        <button onClick={props.onClick}>
            点我点我
        </button>
      )
    }

    function sayHi() {
      console.log('yo')
    }

    render(
      <OneTimeButton onClick={sayHi}/>,
      document.querySelector('#root')
    )

我们想让这个组件做的是，跟踪它是否被点击，如果被点击了，禁用按钮，就像一次性开关一样。

但它需要一个state，因为是一个函数，它不可能有状态(React 16.8之前)，所以需要重构成类。

函数组件转换为类组件的过程中大概有5个阶段：

  • 否认：也许它不需要是一个类，我们可以把 state 放到其它地方。
  • 实现： 废话，必须把它变成一个class，不是吗？
  • 接受：好吧，我会改的。
  • 努力加班重写：首先 写 class Thing extends React.Component，然后 实现 render等等 。
  • 最后：添加state。
    class OneTimeButton extends React.Component {
      state = {
        clicked: false
      }

      handleClick = () => {
        this.props.onClick();

        // Ok, no more clicking.
        this.setState({ clicked: true });
      }

      render() {
        return (
          <button
            onClick={this.handleClick}
            disabled={this.state.clicked}
          >
            You Can Only Click Me Once
          </button>
        );
      }
    }

这是相当多的代码，组件的结构也发生了很大的变化， 我们需要多个小的功能，就需要改写很多。

使用　Hook　轻松添加　State

接下来，使用新的　useState　hook向普通函数组件添加状态：

    import React, { useState } from 'react'

    function OneTimeButton(props) {
      const [clicked, setClicked] = useState(false)

      function doClick() {
        props.onClick();
        setClicked(true)
      }

      return (
        <button
          onClick={clicked ? undefined : doClick}
          disabled={clicked}
        >
          点我点我
        </button>
      )
    }

这段代码是如何工作的

这段代码的大部分看起来像我们一分钟前写的普通函数组件，除了useState。

useState是一个hook。 它的名字以“use”开头（这是Hooks的规则之一 - 它们的名字必须以“use”开头）。

useState hook 的参数是 state 的初始值，返回一个包含两个元素的数组:当前state和一个用于更改state 的函数。

类组件有一个大的state对象，一个函数this.setState一次改变整个state对象。

函数组件根本没有状态，但useState hook允许我们在需要时添加很小的状态块。 因此，如果只需要一个布尔值，我们就可以创建一些状态来保存它。

由于Hook以某种特殊方式创建这些状态，并且在函数组件内也没有像setState函数来更改状态，因此 Hook 需要一个函数来更新每个状态。 所以 useState 返回是一对对应关系：一个值，一个更新该值函数。 当然，值可以是任何东西 - 任何JS类型 - 数字，布尔值，对象，数组等。

现在，你应该有很多疑问，如：

  • 当组件重新渲染时，每次都不会重新创建新的状态吗？ React如何知道旧状态是什么？
  • 为什么hook 名称必须以“use”开头？ 这看起来很可疑。
  • 如果这是一个命名规则，那是否意味着我可以自定义 Hook。
  • 如何存储更复杂的状态，很多场景不单单只有一个状态值这么简单。

Hooks 的魔力

将有状态信息存储在看似无状态的函数组件中，这是一个奇怪的悖论。这是第一个关于钩子的问题，咱们必须弄清楚它们是如何工作的。

原作者得的第一个猜测是某种编译器的在背后操众。搜索代码useWhatever并以某种方式用有状态逻辑替换它。

然后再听说了调用顺序规则(它们每次必须以相同的顺序调用)，这让我更加困惑。这就是它的工作原理。

React第一次渲染函数组件时，它同时会创建一个对象与之共存，该对象是该组件实例的定制对象，而不是全局对象。只要组件存在于DOM中，这个组件的对象就会一直存在。

使用该对象，React可以跟踪属于组件的各种元数据位。

请记住，React组件甚至函数组件都从未进行过自渲染。它们不直接返回HTML。组件依赖于React在适当的时候调用它们，它们返回的对象结构React可以转换为DOM节点。

React有能力在调用每个组件之前做一些设置，这就是它设置这个状态的时候。

其中做的一件事设置 Hooks 数组。 它开始是空的, 每次调用一个hook时，React 都会向该数组添加该 hook。

为什么顺序很重要

假设咱们有以下这个组件：

    function AudioPlayer() {
      const [volume, setVolume] = useState(80);
      const [position, setPosition] = useState(0);
      const [isPlaying, setPlaying] = useState(false);

      .....
    }

因为它调用useState 3次，React 会在第一次渲染时将这三个 hook 放入 Hooks 数组中。

下次渲染时，同样的3个hooks以相同的顺序被调用，所以React可以查看它的数组，并发现已经在位置0有一个useState hook ，所以React不会创建一个新状态，而是返回现有状态。

这就是React能够在多个函数调用中创建和维护状态的方式，即使变量本身每次都超出作用域。

多个useState 调用示例

让咱们更详细地看看这是如何实现的，第一次渲染：

  1. React 创建组件时，它还没有调用函数。React 创建元数据对象和Hooks的空数组。假设这个对象有一个名为nextHook的属性，它被放到索引为0的位置上，运行的第一个hook将占用位置0。
  2. React 调用你的组件（这意味着它知道存储hooks的元数据对象）。
  3. 调用useState，React创建一个新的状态，将它放在hooks数组的第0位，并返回[volume，setVolume]对，并将volume 设置为其初始值80，它还将nextHook索引递增1。
  4. 再次调用useState，React查看数组的第1位，看到它是空的，并创建一个新的状态。 然后它将nextHook索引递增为2，并返回[position，setPosition]。
  5. 第三次调用useState。 React看到位置2为空，同样创建新状态，将nextHook递增到3，并返回[isPlaying，setPlaying]。

现在，hooks 数组中有3个hook，渲染完成。 下一次渲染会发生什么？

  1. React需要重新渲染组件, 由于 React 之前已经看过这个组件，它已经有了元数据关联。
  2. React将nextHook索引重置为0，并调用组件。
  3. 调用useState，React查看索引0处的hooks数组，并发现它已经在该槽中有一个hook。，所以无需重新创建一个，它将nextHook推进到索引1并返回[volume，setVolume]，其中volume仍设置为80。
  4. 再次调用useState。 这次，nextHook为1，所以React检查数组的索引1。同样，hook 已经存在，所以它递增nextHook并返回[position，setPosition]。
  5. 第三次调用useState，我想你知道现在发生了什么。

就是这样了，知道了原理，看起来也就不那么神奇了， 但它确实依赖于一些规则，所以才有使用 Hooks 规则。

Hooks 的规则

自定义 hooks 函数只需要遵守规则 3 ：它们的名称必须以“use”为前缀。

例如，我们可以从AudioPlayer组件中将3个状态提取到自己的自定义钩子中：

    function AudioPlayer() {
      // Extract these 3 pieces of state:
      const [volume, setVolume] = useState(80);
      const [position, setPosition] = useState(0);
      const [isPlaying, setPlaying] = useState(false);

      // < beautiful audio player goes here >
    }

因此，咱们可以创建一个专门处理这些状态的新函数，并使用一些额外的方法返回一个对象，以便更容易启动和停止播放，例如：

    function usePlayerState(lengthOfClip) {
      const [volume, setVolume] = useState(80);
      const [position, setPosition] = useState(0);
      const [isPlaying, setPlaying] = useState(false);

      const stop = () => {
        setPlaying(false);
        setPosition(0);
      }

      const start = () => {
        setPlaying(true);
      }

      return {
        volume,
        position,
        isPlaying,
        setVolume,
        setPosition,
        start,
        stop
      };
    }

像这样提取状态的一个好处是可以将相关的逻辑和行为组合在一起。可以提取一组状态和相关事件处理程序以及其他更新逻辑，这不仅可以清理组件代码，还可以使这些逻辑和行为可重用。

另外，通过在自定义hooks中调用自定义hooks，可以将hooks组合在一起。hooks只是函数，当然，函数可以调用其他函数。

总结

Hooks 提供了一种新的方式来处理React中的问题，其中的思想是很有意思且新奇的。

React团队整合了一组很棒的文档和一个常见问题解答，从是否需要重写所有的类组件到钩Hooks是否因为在渲染中创建函数而变慢? 以及两者之间的所有东西，所以一定要看看。

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

原文：https://daveceddia.com/intro-to-hooks/

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了20亿+错误事件，付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家免费试用！

原文地址：https://www.cnblogs.com/fundebug/p/what-is-react-hooks.html

时间： 2024-07-31 04:23:37

React Hooks究竟是什么呢？的相关文章

React hooks能替代Redux，HOC和render props么？

最近开始学习React,记录一下心得. React hooks是16.8.0推出的,其目的是为了替换class,HOC,render props.同时网传hooks也将终结redux,那么本文将讨论hooks究竟能不能替换掉redux,HOC,render props. 1. Hooks替代Redux. 与其说Hooks替代Redux,不如说是Context在替代Redux.Context是16.3.0推出的(之前也有,但是API不一样且基本没人用).其实从Context开始,可以说不用redu

React Hooks 实现和由来以及解决的问题

与React类组件相比,React函数式组件究竟有何不同? 一般的回答都是: 类组件比函数式组件多了更多的特性,比如 state,那如果有 Hooks 之后呢? 函数组件性能比类组件好,但是在现代浏览器中,闭包和类的原始性能只有在极端场景下才会有明显的差别. 性能主要取决于代码的作用,而不是选择函数式还是类组件.尽管优化策略有差别,但性能差异可以忽略不计. 参考官网:(https://zh-hans.reactjs.org/docs/hooks-faq.html#are-hooks-slow-b

理解 React Hooks

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由志航发表于云+社区专栏 TL;DR 一句话总结 React Hooks 就是在 react 函数组件中,也可以使用类组件(classes components)的 state 和 组件生命周期,而不需要在 mixin. 函数组件.HOC组件和 render props 之间来回切换,使得函数组件的功能更加实在,更加方便我们在业务中实现业务逻辑代码的分离和组件的复用. 本文将从以下几个方面介绍 hooks Hooks 在解决什么问题

30分钟精通React今年最劲爆的新特性——React Hooks

你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗? --拥有了Hooks,生命周期钩子函数可以先丢一边了. 你在还在为组件中的this指向而晕头转向吗? --既然Class都丢掉了,哪里还有this?你的人生第一次不再需要面对this. 这样看来,说React Hooks是今年最劲爆的新特性真的毫不夸张.如果你也对react

react新特性 react hooks

本文介绍的是react新特性react hooks,本文面向的是有一定react开发经验的小伙伴,如果你对react还不是很熟悉的话我建议你先学习react并多多联系. 首先我们都知道react有3种组件:分别是Function函数式无状态组件.class有状态组件.高阶组件.这里不对这3种组件做一一介绍. 本文重点是react hooks 一个最简单的Hooks 首先让我们看一下一个简单的有状态组件: 1 class Example extends React.Component { 2 co

通过 React Hooks 声明式地使用 setInterval

本文由云+社区发表 作者:Dan Abramov 接触 React Hooks 一定时间的你,也许会碰到一个神奇的问题: setInterval 用起来没你想的简单. Ryan Florence 在他的推文里面说到: 不少朋友跟我提起,setInterval 和 hooks 一起用的时候,有种蛋蛋的忧伤. 老实说,这些朋友也不是胡扯.刚开始接触 Hooks 的时候,确实还挺让人疑惑的. 但我认为谈不上 Hooks 的毛病,而是 React 编程模型和 setInterval 之间的一种模式差异.

初探React Hooks &amp; SSR改造

Hooks React v16.8 发布了 Hooks,其主要是解决跨组件.组件复用的状态管理问题. 在 class 中组件的状态封装在对象中,然后通过单向数据流来组织组件间的状态交互.这种模式下,跨组件的状态管理变得非常困难,复用的组件也会因为要兼容不同的组件变得产生很多副作用,如果对组件再次拆分,也会造成冗余代码增多,和组件过多带来的问题. 后来有了 Redux 之类的状态管理库,来统一管理组件状态.但是这种分层依然会让代码变得很复杂,需要更多的嵌套.状态和方法,写代码时也常在几个文件之间不

React Hooks简单业务场景实战（非源码解读）

前言 React Hooks 是React 16.7.0-alpha 版本推出的新特性.从 16.8.0 开始,React更稳定的支持了这一新特性. 它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 注意:React 16.8.0 是第一个支持 Hook 的版本.升级时,请注意更新所有的 package,包括 React DOM.React Native 将在下一个稳定版本中支持 Hook. 如果说promise是JavaScript异步的终极解决方案,那

react hooks学习

接触React项目快两个月了,还在研究摸索各种知识点的过程中,充实且幸福. 在项目中学习新知识,还是很有效率的,一边写项目,一边实验新的知识点,比如react hooks!嘻嘻嘻~~~ 写了好一段时间class组件了,想尝试尝试函数式组件,之前也有试过,但是一碰到需要使用state的地方,只能又把function改成了class,心塞塞,然后没事刷博客,看到了react hooks,有一种缺什么,就有什么新知识冒出来的感觉. 1.State Hook,使用state import { useSt