[React Hooks 翻译] 1-8 介绍Hooks

Jerry__Z
689 阅读4分钟

Hooks 是 React 16.8的新特性。使用Hooks，我们不用去写Class也能使用state，还有一些其他的React特性。

import React, { useState } from 'react';

function Example() {
  // 在这里我们声明了一个新的state变量，叫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，以及如何使用Hooks帮助我们更好的编写组件。

Note

React 16.8.0是第一个支持Hooks的版本。升级时，不要忘记更新所有包，包括React DOM。 React Native将在下一个稳定版本中支持Hook。

视频介绍

在React Conf 2018中，Sophie Alpert和Dan Abramov介绍了Hooks，随后Ryan Florence演示了如何重构应用程序以使用它们。观看视频：

youtu.be/dpw9EHDh2bM…

没有Breaking Changes

Hooks是

  • 完全是可选的。可以使用Hooks而无需重写任何现有代码。不想学现在也不必学习或使用Hooks。
  • 100％向后兼容。
  • 已经可用了（16.8之后的版本）
  1. 没有任何移除class的想法
  2. Hooks没有颠覆你对React的概念
  3. 如何你想开始学习如何使用Hook，你可以直接跳到下一篇

为什么要新增Hooks

解决了很多问题。比如：

组件间复用有关state的逻辑很困难

React没有提供将可复用的行为(reusable behavior)附加到组件上的方法，比如连接一个store。

  1. render props 和 HOC 的不足 如果你用过React，你可能知道 render属性 和 HOC 试着去解决这个问题。但是这种模式需要你在用的时候重构组件，这很麻烦，而且代码维护性也不好。
  2. 嵌套地狱 如果你打开React DevTools，你可能会发现providers, consumers,HOC, render props, 或者其他的抽象组件一层裹着一层，造成“嵌套地狱”。React意识到了这个问题，提供了一种过滤的方法（ filter them out in DevTools ），但这反映了一个问题：React需要一种更简洁的方式处理有关state复用的逻辑

Hooks的优势：

可以把有关state的逻辑从组件中抽离出来，并且不改变组件的层级结构。这样对代码的复用和测试都更友好。

We’ll discuss this more in Building Your Own Hooks.

复杂组件难以理解

组件刚开始写很简单，但是有关state的逻辑和副作用越写越多，组件就变得难以管理

  1. 没有关联的逻辑混在一起：我们经常在每个生命周期函数里都把一些没有关联的逻辑混在一起。
  2. 有关联的逻辑散在各处：比如说，在componentDidMount和componentDidUpdate里去获取数据，就需要执行addEventListener之类的操作，然后componentWillUnmount的使用就要去removeEventListener。添加和清理监听器是相互关联的代码

因为组件里面有关state的逻辑到处都是，所以很多情况下我们无法将组件拆分成更小的组件，并且这样也不利于测试。这就是很多人更喜欢将React和单独的状态管理的库结合的原因之一。

Hook的优势：

可以将组件基于逻辑的关联性拆分成更小的函数，比如说订阅消息、获取数据之类的，而不是基于生命周期拆分相关逻辑。你也可以通过一个reducer来管理组件的内部state

Class会引起困惑

class语法让人疑惑，比如下面这几个方面：

  1. 必须理解this关键词在JavaScript里如何工作
  2. 在事件处理方法中绑定this
  3. 在React里何时使用function组件还是class组件也有争议。
  4. 像Svelte、Angular、Glimmer所展示的那样，组件的 ahead-of-time compilation 展现了很大的潜力，特别是组件不再局限于模板。最近我们用Prepack做了一些有关 component folding 的试验，看到了很有前景的结果。但是我们发现class组件容易让人无意识地使用一些模式，导致优化失败。
  5. class体积压缩不够好
  6. 使热加载不稳定

所以我们想要推出能让代码更优化的API。

Hook的优势：

class看起来不好，用Hook可以不写class

渐进策略

没有从React中移除class的计划

对于有好奇心的读者，我们准备了这篇来深入更多的细节

avatar
文章
阅读
粉丝