React函数组件和class组件以及Hooks
作者 烦恼会解决烦恼
我们都知道定义组件有两个要求：
-
组件名称必须以大写字母开头
-
组件的返回值只能有一个根元素
什么是函数组件▼
函数组件接收一个单一的 props 对象并返回了一个React元素，如下图：
什么是class组件▼
使用ES6 的 class 来定义的组件。如下图：
函数组件和class组件的区别▼
有一段时间，规范的答案是: class组件可以访问更多功能（如状态）。有了Hook，就不再是这样了。
函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。
什么是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
作者 烦恼会解决烦恼
我们都知道定义组件有两个要求：
-
组件名称必须以大写字母开头
-
组件的返回值只能有一个根元素
什么是函数组件▼
函数组件接收一个单一的 props 对象并返回了一个React元素，如下图：
什么是class组件▼
使用ES6 的 class 来定义的组件。如下图：
函数组件和class组件的区别▼
有一段时间，规范的答案是: class组件可以访问更多功能（如状态）。有了Hook，就不再是这样了。
函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。
什么是Hook▼
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。也就是说在React 16.8之后函数组件就可以使用state以及其他的react特性。具体学习hook请前往https://react.docschina.org/docs/hooks-intro.html
有了hook之后函数组件式编程使react项目性能更优，代码更加简洁。如下demo：
长按二维码关注
ID:极致简文
