react state hook - Githubissues

在了解 state 之前，首先需要知道它是 react hook 的一部分。而 react hook 是 react 16.8 的新增特性。实际上在这个时间点才写这样的文章实在是有点晚了。

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

从这一句话可以理解 react hook 的动机是什么。简而言之，hook 是 react 发展的产物。按之前的习惯，复杂的组件我们会写成 class ，简单的组件则会用简单的函数组件处理。而函数组件实际上是非常受限的。hook就是为了解决这个问题存在的。

那么，自然而然就会有以下两个问题：

什么是函数组件不支持，而class组件支持的特性？
以上特性中，有哪些被hook支持了？

hook代表着函数组件能力的扩充，react为此做出的努力稍微想一想就可以明白。也许react app之后会变成函数的集合也不一定。当然，本质上来说现在其实已经是了。从结果上来看，写法简化了，可读性变差了，门槛变高了。

这样一来，之前 vue 3.0 的改动会引起那么大的反响也就可以理解了。我想，尤大一定对群众的反映一头雾水，至于使用 react 的人会觉得 vue 的这种改变还挺理所当然的，只是 “vue 又从 react 里取经了”这种感觉总是挥之不去。

好了，看回 state hook 吧。

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);

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

好像没什么好说的，看上去吓人无非是因为语法诡异了些。简单而言，意思就是声明一个较 count 的 state，把初始值设为 0 ，并且提供 setCount 方法改变它。

如果不了解 state 就无法理解这段代码。这就是我说的门槛变高了。对于已经跨过门槛的人不会有什么感觉，没跨过去的人嘛...

对应的 class：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

Hook 简介使用 State Hook

Hilshire / blog

react state hook #27