React 16.7的Hooks介绍

Hooks是新的功能提案,出现在v16.7.0-alpha版本中,使用Hooks可以让你在不适用类的情况下使用状态和其他的一些react功能。可在此讨论

看下面代码:

import { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

可以看到上面有个useState,这个就是我们将要学习的第一个Hook.

在具体了解之前,先得知道这些变化对你的影响。

无重大改变

  • 完全选择加入: 你可以在几个组件中尝试Hooks,而无需重写任何现有代码。但是如果你不想这样,你现在可以不用学习或使用Hooks
  • 100%向后兼容: Hooks不包含任何重大更改。
  • 现在可使用: Hook目前处于alpha版本,更希望在收到社区反馈后将它们包含在React 16.7

没有计划从React中删除class 你可以在本页底部阅读有关Hooks逐步采用策略的更多信息。

Hook不会取代你对React概念的了解。相反,Hooks为你已经知道的React概念提供了更直接的APIpropsstatecontextrefslifecycle。正如我们稍后将展示的,Hooks还提供了一种新的强大方式来组合它们。

如果只是想开始学习Hooks,直接跳到下一页 你仍然可以继续阅读此页面,详细了解为什么要添加Hooks,以及如何在不重写应用程序的情况下开始使用它们。

动机

Hook解决了React中各种看似无关的问题,我们在编写和维护数以万计的组件时遇到了这些问题。无论你是在学习React,每天使用它,还是更喜欢使用具有类似组件模型的不同库,你都可能会发现其中的一些问题。

在组件之间重用有状态逻辑很困难

React没有提供将可重用行为“附加”到组件的方法(例如,将其连接到store)。如果你已经使用React一段时间,你可能熟悉渲染道具高阶组件等模式,试图解决这个问题。但是这些模式要求你在使用它们时重构组件,这可能很麻烦并且使代码更难以遵循。如果你看一下React DevTools中一个典型的React应用程序,你可能会发现一个由包含提供者,消费者,高阶组件,渲染道具和其他抽象层的组件组成的“包装器地狱”。虽然我们可以在DevTools中过滤它们,但这指出了一个更深层次的基本问题:React需要一个更好的原语来共享有状态逻辑。

使用Hook,你可以从组件中提取有状态逻辑,以便可以独立测试并重用。**Hook允许您在不更改组件层次结构的情况下重用有状态逻辑。**这样可以轻松地在许多组件之间或与社区共享Hook`。

我们将在编写自定义钩子中进行更多讨论。

复杂的组件变得难以理解

我们经常不得不维护一些开始简单的组件,但最后却变成了无法管理的状态逻辑和副作用的情况。每个生命周期方法通常包含不相关逻辑的混合。例如,组件可能会在componentDidMountcomponentDidUpdate中执行一些数据提取。并且,相同的componentDidMount方法可能还包含一些设置事件侦听器的无关逻辑,并在componentWillUnmount中执行清理。这样,相互关联的代码被拆分,但完全不相关的代码最终组合在一个方法中。这很容易引入错误和不一致。

在许多情况下,不可能将这些组件分解为较小的组件,因为状态逻辑遍布整个地方。测试它们也很困难。这是许多人更喜欢将React与单独的状态管理库相结合的原因之一。但是,这通常会引入太多的抽象,要求在不同的文件之间跳转,并使重用组件变得更加困难。

为了解决这个问题,Hooks允许根据相关的部分(例如设置订阅或获取数据)将一个组件拆分为较小的函数,而不是基于生命周期方法强制拆分。你还可以选择使用reducer管理组件的本地状态,以使其更具可预测性。

更多地关于Effect Hook讨论

class混淆了人和机器

在我们的观察中,class是学习React的最大障碍。你必须了解thisJavaScript中是如何工作的,这与它在大多数语言中的工作方式有很大不同。你必须记住bind事件处理程序。没有不稳定的语法提议,代码非常冗长。开发者可以很好地理解propsstate和自上而下的数据流,但仍然很难与类斗争。React中的函数和类组件之间的区别以及何时使用每个组件导致即使在经验丰富的React开发人员之间也存在分歧。

此外,React已经推出了大约五年,我们希望确保它在未来五年内保持相关性。正如SvelteAngularGlimmer和其他人所表明的那样,提前编译组件在未来有很大潜力。特别是如果它不限于模板。最近,我们一直在尝试使用Prepack进行组件折叠,我们已经看到了有希望的早期结果。但是,我们发现类组件可能会增长无意识的模式,使这些优化回归到较慢的路径。类也为今天的工具提出了问题。例如,类不会很好地缩小,并且它们使得热加载片状和不可靠。我们希望提供一种API,使代码更有可能保持可优化途径。

为了解决这些问题,Hooks允许你在没有类的情况下使用更多React的功能。从概念上讲,React组件一直更接近功能(function)。 Hooks拥抱功能,但不会牺牲React的实践精神。钩子提供了对命令式逃生舱口的访问,并且不需要你学习复杂的功能或反应式编程技术。

Hooks概览是开始学习Hooks的好地方。

逐步采用策略

没有计划从React中删除类。

我们知道React开发人员专注于发布产品,没有时间研究正在发布的每个新API。钩子是非常新的,在考虑学习或采用它们之前等待更多示例和教程可能会更好。

我们也理解为React添加新东西的标准非常高。对于好奇的读者,我们已经准备了一个详细的RFC,其中包含更多细节的动机,并提供有关特定设计决策和相关现有技术的额外视角。

至关重要的是,Hooks与现有代码并行工作,因此您可以逐步采用它们。我们正在分享这个实验性的API,以便从社区中那些有兴趣塑造React未来的人那里获得早期反馈 - 我们将在公开场合迭代Hooks

最后,没有急于迁移到Hooks。我们建议避免任何“重大改写”,特别是对于现有的复杂类组件。根据我们的经验,最好先在新的和非关键组件中练习使用Hooks,并确保团队中的每个人都对它们感到满意。在尝试Hooks之后,请随时向我们发送反馈,无论是好的还是不好的。

我们打算让Hooks涵盖所有现有的类用例,但我们将在可预见的未来继续支持类组件。Facebook,我们有数万个组件作为类编写,我们绝对没有计划重写它们。相反,我们开始在新代码中使用Hooks与类并排。

后续将继续介绍对应的api,如需了解,可watch仓库

本文原始出处
原译文

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容

  • 1.首先访问node.js官网(https://nodejs.org/en/download/)下载pkg文件 2...
    Johnmy阅读 682评论 0 0
  • 论婚姻(这题目对于一只单身狗而言似乎是纸上谈兵,但,没吃过猪肉也见过很多猪跑了…)几千年文明下来多妻制与多夫制均有...
    苹果与烤翅阅读 161评论 0 0
  • 娇鹏阅读 205评论 2 0
  • 南宁的风是干冷的。天空并不蓝,没有一丝色彩,像我一样,显得那样苍白无力。 人来人往,川流不息。 想象着即将要面对的...
    咖啡馆的小调阅读 435评论 2 4
  • 一、设计模式的分类 总体来说设计模式分为三大类: 二、设计模式的六大原则
    那谁319阅读 294评论 0 0