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

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

作者 烦恼会解决烦恼

 

 

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

1. 组件名称必须以大写字母开头

2. 组件的返回值只能有一个根元素

 

什么是函数组件▼

  

    函数组件接收一个单一的 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

作者 烦恼会解决烦恼

 

 

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

1. 组件名称必须以大写字母开头

2. 组件的返回值只能有一个根元素

 

什么是函数组件▼

  

    函数组件接收一个单一的 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:极致简文