React 函数式组件和类式组件详情_React_

前言

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

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

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

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 组件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！