[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