极智开发 | React 函数式组件 和 类式组件

极智开发 | React 函数式组件 和 类式组件

大家好，我是极智视界，本文介绍一下 React 函数式组件 和 类式组件。

React 是 组件化的 的 js 库，组件化 也是 React 的核心思想。使用 React 可以构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。那么什么是组件呢？ 组件是用来实现局部功能效果的代码和资源的集合，包括 html / css / js/ image 等，组件的作用是 简化代码、复用代码、提高运行效率。

React 里主要有两种类型的组件：

函数式组件 => 基于函数；类式组件 => 基于类；

文章目录

​​1. 函数式组件​​​​2. 类式组件​​

1. 函数式组件

函数式组件是基于使用 ​​function​​ 定义的函数，函数式组件 和 普通函数 最主要的区别在 调用的时候，函数式组件在渲染的时候没有 被人为显式调用，而是由 React 内部去调用。来看个例子：

我们先创建一个盒子，用 ​​id​​ 进行唯一标识：

引入 react 依赖库，接着在 ​​script​​ 中先 创建一个函数式组件：

//1. 创建函数式组件function MyComponent(){ return

我是函数式组件

然后 渲染组件到页面：

//2. 渲染组件到页面ReactDOM.render(,document.getElementById('demo'))

来分析一下，在执行了 ​​ReactDOM.render(,...)​​ 之后，react 做了哪些事情呢：

(1) react 先解析组件标签​​id ==> demo​​，通过标签找到了​​MyComponent​​ 组件；(2) react 发现组件是函数定义的，接着调用这个函数；(3) react 将函数返回的虚拟 DOM转换为真实DOM;(4) 最后呈现在页面中；

2. 类式组件

类式组件是基于使用 ​​class​​​ 定义的类，需要继承自 ​​React.Component​​​；另外，类式组件中必须实现 ​​render函数​​。来看个例子：

同样，我们先创建一个盒子，用 ​​id​​ 进行唯一标识：

引入 react 依赖库，接着在 ​​script​​ 中 创建一个类式组件：

//1. 创建类式组件class MyComponent extends React.Component { render(){ return

我是类式组件

然后 渲染组件到页面：

//2. 渲染组件到页面ReactDOM.render(,document.getElementById('demo'))

不难发现，类式组件 和 函数式组件 不同的地方就是在创建组件的地方，而在渲染的时候则是一样。同样来来分析一下，在执行了 ​​ReactDOM.render(,...)​​ 之后，react 做了哪些事情呢：

(1) react 先解析组件标签​​id ==> function​​，通过标签找到了​​MyComponent​​ 组件；(2) react 发现组件是用类定义的，接着new一个该类的实例；(3) react 通过该实例调用到类原型上的​​render​​ 方法；(3) react 将​​render​​ 返回的虚拟 DOM转换为真实DOM;(4) 最后呈现在页面中；

好了，以上分享了 React 函数式组件 和 类式组件。希望我的分享能对你的学习有一点帮助。

​​《极智开发 | React 函数式组件 和 类式组件》​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。