2021-01-17 React Hooks 初步学习心得

参考：

官方文档：https://react.docschina.org/

Hooks 文档：https://react.docschina.org/docs/hooks-intro.html

关于 Hooks 是什么我就不多作介绍了，可以直接看文档，我下面就提一下我自己的心得和看法。

首先是第一点：Hooks 会多次执行。

这一点其实是非常直接的，因为你很容易就能注意到组件每次渲染的时候 Hooks 都会执行一次。

在这里引用官方的例子说明一下：

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>
  );
}

该组件每次渲染时都会执行一次 useState ，但是取出来的值却不一样。这也就是 hooks 最大的神奇之处。

如果调用了 setCount 则会导致重渲染，也就是重新执行一次函数。

因此，在使用 Hooks 的时候，需要时刻记住 Hooks 是会多次执行的，因此需要用 useEffect、 useCallback 、useMemo 等函数进行优化性能。

原因就是 Hooks 会多次执行。由于函数的闭包性，在函数内部声明的变量都是局部变量，每次执行都是不一样的。

如果有需要保存状态的变量，除了全局变量外就只有借助 React Hooks。而全局变量对于函数的迁移和重构都是相当不利的，因此使用 React Hooks 保存状态就成了唯一的选择。

接下来要谈的则是对比 Vue 3.0 Composition Api。

由于本人先前主要的技术栈是 Vue ，因此实际上我是先学习了 Vue 3.0 的 Composition Api ，然后回过头来学习了 React Hooks 。

在这个过程中，我也确实感受到了两者的相似之处，和类似的逻辑抽取能力。

但是，正如我前面所说，要时刻记住 React Hooks 会多次执行，而与之相反的是 Composition Api 只会执行一次。相比较之下在心智负担上 Composition Api 确实轻了一些。

不过，这也并不意味着 React Hooks 就没有可取之处，否则全球那么多开发者也就不会为 React Hooks 而欣喜若狂了。

React Hooks 确实是一项非常伟大的设计，让开发者可以用更加清晰的方法来复用自己的逻辑。对比 class 组件，函数式组件 + React Hooks 让逻辑抽离变得轻而易举。

// 还是官方文档，上面那个例子的等价 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>
    );
  }
}

虽然要踩的坑还有很多，但是熟练掌握之后还是有很大用处的，所以，还是要学习一下 React Hooks。

最后呢，要我总结一下我的心得呢，那就是：

React Hooks，针不戳~

本文作者：草梅友仁
本文地址： https://blog.cmyr.ltd/archives/c5ebcae0.html
版权声明：转载请注明出处！