首页 > 其他分享> > 认识反应

认识反应

2022-09-12 02:02:06 作者：互联网

一、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 > < 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 > < 脚本 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 > 电影列表
- {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 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/29446/43471201

标签：react,渲染,认识,绑定,React,反应,组件,ReactDOM
来源： https://www.cnblogs.com/amboke/p/16685310.html

认识反应

一、React的介绍和特点

1.1 React 简介

1.2 React 的特点

1.2.1 声明式编程

1.2.2 组件化开发

1.2.3 多平台适配

二、React开发依赖分析

2.1 React依赖三个包

2.2 Babel 和 React 的关系

三、React初体验

3.1 你好世界

3.2 Hello React 案例

4. 组件化初步体验

4.1 用类封装组件

4.2 数据依赖

4.3 事件绑定

4.4 代码实现

五、demo练习

5.1 电影列表

5.2 计数器