React函数组件和class组件以及Hooks

爱被打了一巴掌 2023-07-03 08:08 14阅读 0赞

**React函数组件和class组件以及Hooks**

**作者 烦恼会解决烦恼**

我们都知道定义组件有两个要求：

1.  组件名称必须以大写字母开头
2.  组件的返回值只能有一个根元素

**什么是函数组件▼**

函数组件接收一个单一的 `props` 对象并返回了一个React元素，如下图：

![image.png][]

**什么是class组件▼**

使用[ES6 的 class][ES6 _ class] 来定义的组件。如下图：

![image.png][image.png 1]

**函数组件和class组件的区别▼**

有一段时间，规范的答案是: class组件可以访问更多功能（如状态）。有了[Hook][]，就不再是这样了。

函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。![image.png][image.png 2]

**什么是Hook▼**

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。也就是说在React 16.8之后函数组件就可以使用state以及其他的react特性。具体学习hook请前往https://react.docschina.org/docs/hooks-intro.html

有了hook之后函数组件式编程使react项目性能更优，代码更加简洁。

**React函数组件和class组件以及Hooks**

**作者 烦恼会解决烦恼**

我们都知道定义组件有两个要求：

1.  组件名称必须以大写字母开头
2.  组件的返回值只能有一个根元素

**什么是函数组件▼**

函数组件接收一个单一的 `props` 对象并返回了一个React元素，如下图：

![image.png][]

**什么是class组件▼**

使用[ES6 的 class][ES6 _ class] 来定义的组件。如下图：

![image.png][image.png 1]

**函数组件和class组件的区别▼**

有一段时间，规范的答案是: class组件可以访问更多功能（如状态）。有了[Hook][]，就不再是这样了。

**什么是Hook▼**

有了hook之后函数组件式编程使react项目性能更优，代码更加简洁。如下demo：![image.png][image.png 3]

长按二维码关注  
ID:极致简文

![qrcode\_for\_gh\_a84046c76875\_258 (1).jpg][qrcode_for_gh_a84046c76875_258 _1_.jpg]

[image.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS4xMzVlZGl0b3IuY29tL2ZpbGVzL3VzZXJzLzc5My83OTMzNTg2LzIwMjAwMi8yekdYM0ZqZV9xSHc3LnBuZw?x-oss-process=image/format,png
[ES6 _ class]: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes
[image.png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS4xMzVlZGl0b3IuY29tL2ZpbGVzL3VzZXJzLzc5My83OTMzNTg2LzIwMjAwMi9Nak5aakN4ZF90TWRtLnBuZw?x-oss-process=image/format,png
[Hook]: https://github.com/xiaohesong/TIL/blob/master/front-end/react/hooks/intro.md
[image.png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS4xMzVlZGl0b3IuY29tL2ZpbGVzL3VzZXJzLzc5My83OTMzNTg2LzIwMjAwMi9zQTJ4V3N6TF9GU3RRLnBuZw?x-oss-process=image/format,png
[image.png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS4xMzVlZGl0b3IuY29tL2ZpbGVzL3VzZXJzLzc5My83OTMzNTg2LzIwMjAwMi9PREt4MnZ4a19aV1hULnBuZw?x-oss-process=image/format,png
[qrcode_for_gh_a84046c76875_258 _1_.jpg]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS4xMzVlZGl0b3IuY29tL2ZpbGVzL3VzZXJzLzc5My83OTMzNTg2LzIwMjAwMi9YVVR4T0VrWF9nTDcyLmpwZw?x-oss-process=image/format,png