如果没有 hooks 编写 class 使用 state 以及其他 react 特性会是怎样呢？能否举例说明一下？

Question

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

请问下，如果没有 hooks 编写 class 使用 state 以及其他 react 特性会是怎样呢？能否举例说明一下？

我指的是，使用hooks编写代码会带来哪些好处？

Answer 1

你可以先复习一下初中语文，学会造长句、加逗号、起标题。

首先回答标题：如果没有 hooks，编写 class 的情况下使用 state 以及其他的 React 特性会是怎样的？

这句话的核心在于“使用 state”，但是加了两个限制条件“没有 hooks”和“编写 class”，这就是 hooks 出现之前，React 的一般玩法：

class Counter extends React.Component {
  state = {
    count: 0
  };

  render(){
    const { count } = this.state;
    return (
      <button
        onClick={() => { this.setState({ count: count+1 }) }}
      >
        点击次数：{count}
      </button>
    )
  }
}

👆 class 组件实例化之后，每个实例相当于有自己的一片天地，自己在里面维持一个状态是天经地义的。

再回答问题描述里的问题：使用hooks编写代码会带来哪些好处？

事实上，单就 hooks 来看，它并没有带来任何好处，它只是弥补了函数式组件的一个固有缺陷而已，这个固有缺陷就是纯函数没有状态。
像上面例子中的 count 功能，用来记录按钮的点击次数，很简单对不对？但是如果使用纯函数是做不到的，使用纯函数就像有些公司频繁换领导一样，上一届领导做到一半的事情，接任的领导可能不会继续完成。
你可能会想到用全局变量或者 IIFE：

let count = 0;
function Counter(){
    return (
      <button
        onClick={() => { count++ }}
      >
        点击次数：{count}
      </button>
    )
}

确实也可以计数，但是每次执行 Counter 指向的都是同一个 count，导致 Counter 不能复用。

你可能会想到由父组件传递：

function Counter(state = { count:0 }){
    const { count } = state;
    return (
      <button
        onClick={() => { state.count++ }}
      >
        点击次数：{count}
      </button>
    )
}

这样确实可以，唯一的问题就是：父组件的 state 又该怎么管理呢，不管理最终还是记不住？这样推导下去，最终一定会有一个根组件需要管理 state。

不过我其实是比较中意这种写法的，state不一定要由父组件显式传入，而是由调度机制默认注入，剩下的问题在于注入的内容不便于扩展。

除此之外，milkdown 组件的那种“先初始化为组件、再声明渲染逻辑”的点子也很妙，对 React 稍加改造，就可以实现类似的编码方式：

function Counter({ initState }){
  const [setState, getState] = initState(0);

  return () => {
      const count = getState();
      return <button
        onClick={() => { setState(count+1) }}
      >
        点击次数：{count}
      </button>
  {
}

但这种写法似乎也存在可扩展性的问题。

回到这些方案试图解决的问题——“纯函数没有状态”，而 hooks解决了纯函数没有状态的问题。React 的其他特性，不能用纯函数解决的部分，归根结底也不过是状态的问题。

Answer 2

"好问题"，多查看几篇官方文档，问题迎刃而解。
参考官方文档即可：https://zh-hans.reactjs.org/d...