目录前言1. 函数式组件2. 类式组件前言 React 是 组件化的 的 js 库，组件化 也是 React 的核心思想。使用 React 可以构建管理
React 是 组件化的 的 js 库，组件化 也是 React 的核心思想。使用 React 可以构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。那么什么是组件呢？ 组件是用来实现局部功能效果的代码和资源的集合，包括 html / CSS / js/ image 等，组件的作用是 简化代码、复用代码、提高运行效率。
React 里主要有两种类型的组件：
函数式组件是基于使用 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 做了哪些事情呢：
id ==> demo，通过标签 找到了 MyComponent 组件；类式组件是基于使用 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 做了哪些事情呢：
id ==> function，通过标签 找到了 MyComponent 组件；render 方法；render 返回的 虚拟 DOM 转换为 真实DOM;到此这篇关于React 函数式组件和类式组件详情的文章就介绍到这了,更多相关React 组件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: React 函数式组件和类式组件详情
本文链接: https://www.lsjlt.com/news/171521.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0