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，针不戳~

• 本文作者： 草梅友仁(CaoMeiYouRen)
• 本文链接： https://wp.cmyr.ltd/archives/react-books-preliminary-learning-experience
• 版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！