标签：react 渲染 认识 绑定 React 反应 组件 ReactDOM
一、React的介绍和特点
1.1 React 简介
- 什么是反应？
- React：用于构建用户界面的 JavaScript 库
- React 官网文档
1.2 React 的特点
1.2.1 声明式编程
- 声明式编程是目前整个前端开发的模式：Vue、React、Flutter、SwiftUI
- 我们只需要维护我们自己的状态。当状态发生变化时，React 可以根据最新状态渲染 UI 界面。
1.2.2 组件化开发
- 组件化开发页面的当前前端趋势，每个复杂的界面都可以拆分成小组件
1.2.3 多平台适配
- 2013年，React发布之初，主要是开发网页
- 2015 年，Facebook 推出 ReactNative，用于开发移动跨平台
- 2017 年，Facebook 推出了用于开发虚拟现实 Web 应用程序的 ReactVR
二、React开发依赖分析
界面上显示一个按钮和一段文字，点击按钮切换文字
2.1 React依赖三个包
- react：包含react所需的核心代码
- react-dom：不同平台react渲染所需的核心代码
- Web端：react-dom最终会将jsx渲染成真实的DOM并显示在浏览器中
- Native端：react-dom最终会将jsx渲染成原生控件（如Android中的Button，iOS中的UIButton）
- babel：将 jsx 转换为 React 代码的工具
2.2 Babel 和 React 的关系
- 什么是巴别塔？
- 目前广泛应用于前端 编译器、翻译器 .
- 比如目前很多浏览器不支持 ES6 语法，但是 ES6 语法确实非常简洁方便，我们希望在开发的时候使用；那么我们就可以用ES6写源码，再用ES6写源码。 通过 Babel 工具将大多数浏览器支持的 ES6 转换为 ES5 语法
- React 和 Babel 的关系
- 默认情况下，你可以在不使用 babel 的情况下开发 React
- 前提是我们使用
React.createElement写源代码，但是写出来的代码非常繁琐，可读性差。 - 我们可以直接写jsx（JavaScript XML）的语法，让babel帮我们转换成
React.createElement. - React 依赖注入
- 直接CDN介绍
- crossorigin属性的目的是解决跨域问题
<script src= "https://unpkg.com/[ [电子邮件保护]](/cdn-cgi/l/email-protection) /umd/react.development.js" 跨域></script> < 脚本 src = "https://unpkg.com/[ [电子邮件保护]](/cdn-cgi/l/email-protection) /umd/react-dom.development.js" 跨域 ></ script > < 脚本 src = "https://unpkg.com/[ [电子邮件保护]](/cdn-cgi/l/email-protection) /babel.min.js" ></ script >复制代码- 下载后，添加本地依赖
- 由 npm 管理
三、React初体验
3.1 你好世界
- 在编写 React 的脚本代码中，必须添加
类型=“文本/通天塔”, 效果可以 让babel解析jsx的语法 - 在反应 18 之前
ReactDOM.render(<h2>你好世界</h2>, document.querySelector("#root"))- 引入 React 18 依赖会报错
- 反应 18
- 经过
ReactDOM.createRoot()选择一个根 ReactDOM.createRoot作用：用于创建一个React根，然后渲染的内容会包含在这个根中- 参数：将渲染内容挂载到哪个 HTML 元素
< div id = "根" ></ div > < div id = "应用程序" ></ div ><!-- 添加依赖 --><!-- 依赖三个包 --><!-- CDN引入 --> < script crossorigin src = "https://unpkg.com/[ [电子邮件保护]](/cdn-cgi/l/email-protection) /umd/react.development.js" ></ script > < script crossorigin src = "https://unpkg.com/[ [电子邮件保护]](/cdn-cgi/l/email-protection) /umd/react-dom.development.js" ></ script ><!-- babel --> < 脚本 src = "https://unpkg.com/[ [电子邮件保护]](/cdn-cgi/l/email-protection) /babel.min.js" ></ script > < script type = "text/babel" > // 渲染 Hello World // React 18 之前：React.DOM.render // ReactDOM.render(<h2>你好世界</h2>, document.querySelector("#root")) // 在 React18 之后 const root = ReactDOM . createRoot (document.querySelector ("#root")) 根。渲染（<h2>Hello World</ h2 > ) 常量应用程序 = ReactDOM 。 createRoot (document.querySelector ("#app")) 应用程序。渲染（<h2>Hello World</ h2 > ) 复制代码
3.2 Hello React 案例
一个按钮，一段文字，点击按钮修改文字
- 注意 : React 修改内容后需要 重新渲染界面
- 基本实现
常量根 = ReactDOM 。 createRoot ( document .querySelector ( "#root" )) // 将文本定义为变量 let message = "Hello World" // 监听按钮点击 const btnClick = ( ) => { // 更改数据 message = "Hello React" // 重新渲染 rootRender () } // 先渲染 rootRender () function rootRender ( ) { root.渲染 (( < div > < h2 > {消息}</ h2 > <button onClick = {btnClick} > 修改文字</ button ></ div >)) } 复制代码
4. 组件化初步体验
4.1 用类封装组件
- 定义一个类（类名大写， 组件名称必须大写 , 小写将被视为 HTML 元素), 继承自 React.Component
- 实现当前组件的渲染功能
- render中返回的jsx内容就是React后面会帮助我们渲染的内容
4.2 数据依赖
- 组件中的数据，我们可以分为两类：
- 参与界面更新数据 ：当data变量时，组件渲染的内容需要更新
- 不参与接口更新的数据 ：当数据变量不需要更新将组成渲染的内容时
- 参与接口更新的数据也可以称为参与数据流。此数据在当前对象的状态中定义。
- 通过构造函数中的 this.state = {defined data}
- 当数据发生变化时，可以调用
这个.setState更新数据并通知 React 执行更新操作 - 当执行更新操作时，它将 调用渲染函数 ，并使用最新的数据来渲染界面
4.3 事件绑定
- 事件绑定中的 this
- 直接在类中定义一个函数，并将这个函数绑定到元素的onClick事件上。这个函数当前指向谁？
- 默认未定义
- 为什么
不明确的毛呢布？ - 因为在正常的DOM操作中，监听点击，监听函数中的this其实是一个节点对象（比如按钮对象）
- 这一次，因为 React 并没有直接渲染成真实的 DOM，所以写的按钮只是一个语法糖，其本质就是 React 的 Element 对象
- 那么这里发生监听的时候，react在执行函数的时候并没有绑定this。默认是一个未定义的（类中的方法，默认是严格模式，严格模式
这个方向不明确的) - 在绑定函数中，你可能要使用当前对象，比如执行this.setState函数，就必须获取当前对象的this
- 传入函数时，需要直接将 this 绑定到函数（ 通过绑定 )
- 类似于下面的写法：
** <button onClick={this.changeText.bind(this)}>更改文本</button>**
4.4 代码实现
// 类组件
类 App 扩展 React.Component {
// 组件数据
构造函数（）{
极好的（）
这个。状态 = {
消息：“你好世界”
}
// // 需要绑定的方法，提前绑定this
// this.changeText = this.changeText.bind(this)
}
// 实例方法
更改文本（） {
// setState 是继承自父类的方法
// 内部做了两件事：1.修改状态下的消息2.自动重新执行render函数
这个。设置状态（{
消息：“你好反应”
})
}
// 渲染内容
使成为（） {
// console.log(this); // 指向当前App
返回 （
<div>
< h2 > {this.state.message}</ h2 >
< button onClick = {this.changeText.bind(this)} > 修改文字</ button >
</ div >
)
}
}
// 将组件渲染到界面
常量根 = ReactDOM。 createRoot(document.querySelector("#root"))
根。渲染（<应用/>）
复制代码
- 影响
五、demo练习
5.1 电影列表
-
使用数组的列表循环
地图方法// 创建根
常量根 = ReactDOM。 createRoot(document.querySelector("#root"))// 封装组件
类 App 扩展 React.Component {
构造函数（）{
极好的（）这个。状态 = {
电影：[《西游记》、《孤独的月球》、《流浪地球》、《飞翔的人生》、《火星救援》]
}
}使成为（） {
< h2 > 电影列表
返回 （- {this.state.movies.map(movie =>
- {movie} )}
)
}
}
// 渲染组件
根。渲染（<应用/>）
复制代码
5.2 计数器
常量根 = ReactDOM。 createRoot(document.querySelector("#root")) 类 App 扩展 React.Component { 构造函数（）{ 极好的（） 这个。状态 = { 计数器：100 } 这个。增量=这个。增量。绑定（这个） 这个。减量 = 这个。递减。绑定（这个） } 增量（） { 这个。设置状态（{ 柜台：这个。状态。计数器 + 1 }) } 减量（）{ 这个。设置状态（{ 柜台：这个。状态。计数器 - 1 }) } 使成为（） { 常量 { 计数器 } = 这个。状态 返回 （ <div> < h2 > 当前计数：{counter}</ h2 > < 按钮 onClick = {this.increment} > +1</ button > < 按钮 onClick = {this.decrement} > -1</ button > </ div > ) } } 根。渲染（<应用/>） 复制代码版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议。转载请附上原文出处链接和本声明。
这篇文章的链接： https://homecpp.art/0211/7575/1138
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
- {movie} )}
)
}
}
标签：react,渲染,认识,绑定,React,反应,组件,ReactDOM 来源： https://www.cnblogs.com/amboke/p/16685310.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。