react 只更新数组里某个值_[译] React Hooks: 没有魔法，只是数组

[译] React Hooks: 没有魔法，只是数组

原文链接： https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e

我是 React 新特性 Hooks 的粉丝。但是，在你使用 React Hooks的过程中，有一些看上去 很奇怪的限制 。在本文里，对于那些还在为了理解这些限制而苦苦挣扎的同志，我尝试通过一些列图表的方式，来解释为什么会存在这些限制。

理解hooks怎么运行

我听说很多同学都对hooks像魔法一般的效果感到困惑，因此我将尝试通过浅显的方式，来演示hooks是怎么运行的。

hooks的原则

react团队在怎么使用hooks的 官方文档 中，强调了两点主要的使用原则：

• 不要 在 循环、条件语句或者嵌套函数中调用hooks
• 只能在 React 函数组件中调用hooks

第二点我认为是显而易见的。为了给 函数组件 增加一些能力(比如 state，类声明周期方法)，你当然需要通过一种方式，来把这种能力赋给函数组件，这种方式就是使用hooks。

然而，第一点规则，很容易让人感到困惑。不就是使用一个 API 么，为什么还有这么多限制呢。这也正是我将要在下文里解释的。

hooks中的state管理，只是在操作数组

为了更加清晰的理解hooks，让我们来看看怎么简单实现hooks API。

请注意，下面代码只是一个demo，是为了让我们理解hooks大概是怎么运作的。这不是 React 中的真正内部实现。

怎么实现 useState 呢？

让我们通过一个例子来演示，useState内部大概是怎么运作的。

组件代码如下：

function RenderFunctionComponent() {
    
  const [firstName