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

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的计划

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