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

目录
  • 前言
  • 1. 函数式组件
  • 2. 类式组件

前言

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

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

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

1. 函数式组件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React函数式组件</title>
</head>
<body>
	<div id="demo"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="./react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="./react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="./babel.min.js"></script>

	<script type="text/babel">
		//1. 创建函数式组件
		function MyComponent(){
			return <h2>我是函数式组件</h2>
		}
		//2. 渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('demo'))
	</script>
</body>
</html>

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

<div id="demo"></div>

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

//1. 创建函数式组件
function MyComponent(){
	return <h2>我是函数式组件</h2>
}

然后 渲染组件到页面：

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

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

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

2. 类式组件

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

来看个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React类式组件</title>
</head>
<body>
	<div id="demo"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="./react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="./react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="./babel.min.js"></script>

	<script type="text/babel">
		//1. 创建类式组件
		class MyComponent extends React.Component {
			render(){
				return <h2>我是类式组件</h2>
			}
		}
		//2. 渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('demo'))
	</script>
</body>
</html>

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

<div id="demo"></div>

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

//1. 创建类式组件
class MyComponent extends React.Component {
	render(){
		return <h2>我是类式组件</h2>
	}
}

然后 渲染组件到页面：

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

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

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

到此这篇关于React 函数式组件和类式组件详情的文章就介绍到这了,更多相关React 组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 为react组件库添加typescript类型提示的方法

    以我自己的组件react-better-countdown为例, 首先在package.json里面添加types: types/index.d.ts, , 然后文件目录上添加对应文件夹和文件, 最后是index.d.ts文件的编写,具体看代码: import * as React from 'react'; interface CountdownProps { count?: number; dayText?: string | React.ReactElement; hourText?: s

  • React通过父组件传递类名给子组件的实现方法

    React 教程 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源. React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它. React 特点 1.声明式设计 −React采用声明范式,可以轻松描述应用. 2.高效 −React通过对DOM的模拟,最大限度

  • React函数式组件的性能优化思路详解

    优化思路 主要优化的方向有2个: 减少重新 render 的次数.因为在 React 里最重(花时间最长)的一块就是 reconction(简单的可以理解为 diff),如果不 render,就不会 reconction. 减少计算的量.主要是减少重复计算,对于函数式组件来说,每次 render 都会重新从头开始执行函数调用. 在使用类组件的时候,使用的 React 优化 API 主要是:shouldComponentUpdate和 PureComponent 那么在函数式组件中,我们怎么做性能

  • 使用 React Hooks 重构类组件的示例详解

    目录 1. 管理和更新组件状态 2. 状态更新后的操作 3. 获取数据 4. 卸载组件时清理副作用 5.  防止组件重新渲染 6. Context API 7. 跨重新渲染保留值 8. 如何向父组件传递状态和方法? 9. 小结 最初,在 React 中可以使用 createClass 来创建组件,后来被类组件所取代.在 React 16.8 版本中,新增的 Hooks 功能彻底改变了我们编写 React 程序的方式,使用 Hooks 可以编写更简洁.更清晰的代码,并为创建可重用的有状态逻辑提供了

  • 深入理解react 组件类型及使用场景

    函数组件 vs 类组件 函数组件(Functional Component )和类组件(Class Component),划分依据是根据组件的定义方式.函数组件使用函数定义组件,类组件使用ES6 class定义组件 // 函数组件 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } // 类组件 class Welcome extends React.Component { render() { retu

  • React函数组件与类组件使用及优劣对比

    React函数组件与类组件使用及优劣对比

    目录 一.类组件的问题 原因一.因为this带来的问题: 问题描述 问题解析 原因二.类组件代码量比函数组件多: 原因三.类组件过于臃肿不易拆分: 二.函数组件的问题 挂载阶段:getDerviedStateFromProps VS 无 挂载阶段:UNSAFE_componentWillMount VS 无 挂载阶段:componentDidMount VS useEffect render: 生命周期,更新阶段:UNSAFE_componentWillRerciveProps VS 无 生命周

  • React函数式组件与类组件的不同你知道吗

    React函数式组件与类组件的不同你知道吗

    目录 区别 其他区别 总结 区别 区别 函数组件 类组件 生命周期 无 有 this 无 有 state 无 有 改变state React Hooks:useState this.setState() 性能 高(不用实例化) 低(需要实例化) 其他区别 ProfilePageClass.js import React from 'react'; class ProfilePageClass extends React.Component { showMessage = () => { aler

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

    目录 前言 1. 函数式组件 2. 类式组件 前言 React 是 组件化的 的 JS 库,组件化 也是 React 的核心思想.使用 React 可以构建管理自身状态的封装组件,然后对其组合以构成复杂的 UI.那么什么是组件呢? 组件是用来实现局部功能效果的代码和资源的集合,包括 html / css / js/ image 等,组件的作用是 简化代码.复用代码.提高运行效率. React 里主要有两种类型的组件: 函数式组件 => 基于函数: 类式组件 => 基于类: 1. 函数式组件 函

  • react-native 父函数组件调用类子组件的方法(实例详解)

    react-native 父函数组件调用类子组件的方法,代码如下所示: import React, {Component} from 'react'; import {Text, View, TouchableOpacity} from 'react-native'; // 父 let child onRefbbb = (ref) => { child = ref } clickccc = () => { child.myName() } const Parent =()=> { ret

  • 使用 TypeScript 开发 React 函数式组件

    目录 前言 如何使用 TypeScript 定义函数式组件 1. 使用 React.FC 2. 使用 JSX.Element 3. 直接定义完整类型 4. 使用 React.PropsWithChildren 使用过程需要注意的点 1. 函数式组件返回值不能是布尔值 2. 无法为组件使用 Array.fill() 填充 3. 支持使用泛型来创建组件 前言 在我们使用 React 开发项目时,使用最多的应该都是组件,组件又分为函数组件和类组件,我们可以这么定义: 定义函数组件: function

  • React函数组件和类组件的区别及说明

    目录 React函数组件和类组件区别 函数组件 类组件 区别 React函数式组件和类组件的优缺点 1.类组件的性能消耗比较大 2.函数式组件性能消耗小 React函数组件和类组件区别 定义组件有两个要求: 组件名称必须以大写字母开头 组件的返回值只能有一个根元素 函数组件 function Welcome (props) {   return <h1>Welcome {props.name}</h1> } ReactDOM.render(<Welcome name='rea

  • React函数式组件Hook中的useState函数的详细解析

    目录 前言 一.什么是函数式组件 二.useState 前言 公司项目需要使用react,而函数式组件也是官方比较推荐的!!!所以学习hooks是很重要的. 一.什么是函数式组件 纯函数组件有以下特点: 没有状态 没有生命周期 没有 this 因存在如上特点,使得纯函数组件只能做UI展示的功能, 涉及到状态的管理与切换就不得不用到类组件或者redux. 但因为简单的页面也是用类组件,同时要继承一个React实例,使得代码会显得很重. 以前我们可以使用class来声明一个组件,其实使用functi

  • React函数式组件Hook中的useEffect函数的详细解析

    React函数式组件Hook中的useEffect函数的详细解析

    目录 前言 useEffect的作用 useEffect的使用? 1.class组件 2.函数式组件 总结 前言 React函数式编程没有生命周期,因此需要借助useEffect来实现. useEffect的作用 发ajax请求获取数据 设置订阅/获取定时器 手动更改真实DOM useEffect的使用? 1.class组件 在class组件中可以使用生命周期函数,知道组件触发的过程. 代码如下(示例): import React, { Component } from 'react' expo

  • React组件设计模式之组合组件应用实例分析

    本文实例讲述了React组件设计模式之组合组件应用.分享给大家供大家参考,具体如下: 这种模式本质上解决的是组件之间传值的问题.但是它对于传值以及一些内部操控的逻辑封装得更严密. 场景:希望减少上下级组件之间props的传递,简单来说就是不用传做显式地传值,来达到组件之间相互通信的目的 举例来说,某些界面中应该有Tabs这样的组件,由Tab和TabItem组成,点击每个TabItem,该TabItem会高亮, 那么Tab和TabItem自然要进行沟通.很自然的写法是像下面这样 <TabItem

  • 详解Android中通过Intent类实现组件间调用的方法

    详解Android中通过Intent类实现组件间调用的方法

    Intent是Android中用来调用其它组件的类,通过Intent,我们可以非常方便的调用Activity,Broadcast Receiver和Service. Intent intent = new Intent(Intent.ACTION_VIEW); intent.setData(Uri.parse("http://www.baidu.com")); startActivity(intent); 上面这段代码可以用来调用第三方的Activity(启动第三方浏览器来打开百度首页

随机推荐