React核心思维模型（一）

ops/2024/10/30 6:00:01/

一、数据和视图分离，数据改变驱动视图更新

<div>Tom</div>

如果我们想修改上述div盒子中的Tom为Jerry，应该怎样修改呢 

在jquery中我们直接把界面元素抓过来修改

document.getElementsByTagName('div').item(0) = 'Jerry'

但在react中，当需要更改用户界面时，在绝大多数情况下，我们都是去操作数据，而不是直接更改界面元素（DOM 节点）。当数据变动以后，相应的界面元素会自动更改。

<div>{state}</div>
const [state, setState] = useState('Tom')
setState('Jerry')

注意：在用 React 写界面时，先写一些 HTML 作为页面的静态结构，再用大括号标记，加入动态的、可交互的元素，记住，永远只关注数据！！

拓展：受控组件和非受控组件

当一个 input 关联了一个数据项（比如 state），我们称之为受控组件。其他可交互的 HTML 元素跟 input 情况类似，比如 select 和 textarea。

与受控组件相对应，另有一种组件被称为非受控组件，也就是说其状态不受 React 控制。

绝大多数情况下，我们都使用受控组件，非受控组件一般用于 state 无法表达控件状态的情况，比如，支持文件上传框：<input type="file" />。

二、声明式、命令式和响应式

1.命令式：

传统的Web编程方式，比如jquery和浏览器API，需要我们一步一步下达明确的指令，考虑实现细节，在脑中跟踪系统内部状态，什么时候创建DOM元素，调用哪个Web API等等

示例打开对话框步骤

1.对话框是否存在？

2.如果不存在就创建对话框div，添加button

3.调整样式为display:block

2.声明式：

新生代Web框架，比如React、Vue.js以及SQL语言和CSS，我们只需要描述想要的结果，具体实现细节交给react本身，可以专注于业务逻辑

//绑定动态数据

const [visible ,setVisible] = useState(false)

//打开对话框

setVisible(true)

{visible && <div>对话框</div>}

注意：声明式其实是命令式的一种抽象，react底层本身也肯定调用了很多命令式的DOM API，所有声明式语言或者框架都是以某种命令式的实现为基础的

3.响应式

声明式和响应式是react的基本特征

当数据发生变化时，react将自动对相关DOM元素做相应的调整，看起来就像是DOM响应了数据变化的号召而自发地做出地更改，所以声明式是响应式的基础

react不算完全意义上的响应式，因为还需要我们调用set函数进行更改，而在Vue中，我们确实可以做到直接修改变量的值实现界面的改动

react的这种方式虽然会相对繁琐一点，但是在查找bug更方便，因为可以一直沿着函数调用栈追溯到肇事的代码                

三、JSX详解

1.JSX理解

JSX是伪装成HTML的JavaScript代码，JSX 标签实际上是一个函数调用

在发送到浏览器执行之前， React 开发工具将 JSX 标签自动转换为相应的 JavaScript 代码。

例子一

<div>Tom</div>

跟下面的代码是等效的

import {jsx as _jsx} from 'react/jsx-runtime'
function App() {return _jsx("div", { children: "Tom" })
}

在App函数里，我们调用了_jsx函数并且返回其结果，这个函数接收了两个参数："div"和{children:"Tom" }

 例子二

<div className="mr-wall" />//等价于_jsx("div", { className: "mr-wall" })

这个函数调用仍然有两个参数，第一个参数是元素的类型，第二个参数则是包含了所有属性的一个对象。

例子三

<div><button />
</div>//等价于_jsx('div', { children: _jsx('button') })

children 是一个特殊的属性，包含了嵌套在 div 里的标签，或者说是 div 的“孩子”。而 button 同时也是一个 jsx 标签，所以 children 的值是再一次调用 _jsx 的结果。

例子四

<div className="container"><div className="mr-wall"> {alan} </div><button />
</div>

转换成 JavaScript：

_jsx('div', { className: "container", children: [_jsx("div", { className: "mr-wall", children: [" ", alan, " "] }), _jsx('button')
]})

2.JSX返回值

_jsx 函数所创建并返回了一个简单的 JavaScript 对象，这个对象的正式名称是 React 元素

function App() {const result = _jsx("input")console.log(result) // 打印到控制台return result
}

上述代码的打印结果是

Object {type: "input", key: null, ref: null, props: Object, _owner: null}

既然是函数调用，JSX 标签就是一个 JavaScript 表达式，可以写在任何能容纳表达式的地方。可以将JSX 标签赋值给一个变量，或者作为参数在调用函数时传过去，或者打印在控制台上。

3.JSX 和 HTML 的区别

举例比较

// JSX
<input style={{ minWidth: 200 }} />// HTML
<input style="min-width: 200px" />

为什么有两层大括号呢？

  • 外层大括号让 JSX 识别这是 JavaScript
  • 内层大括号定义了样式对象，minWidth: 200是一个键值对

 再看一个例子，HTML 的按钮是这样写的：

<button onclick="alert('OK')">OK</button>

当用户点击按钮时，onclick 属性中的代码会被执行，alert('OK') 作为一个字符串被当作 JavaScript 代码执行。

而 JSX 版本则是这样的：

<button onClick={() => alert("OK")}>OK</button>

 改成JavaScript：

_jsx('button', { onClick: () => alert('OK')}, "OK")

当用户点击这个按钮时，会触发 onClick 属性中定义的函数，() => alert('OK') 作为一个函数被当作 JavaScript 代码执行。

其他区别：

特性JSXHTML
语法类似于 JavaScript，允许使用表达式标准的标记语言，不支持 JavaScript 表达式
组件支持组件（如 <MyComponent />）只支持 HTML 元素，没有组件概念
属性命名使用 camelCase（如 className）使用小写字母（如 class）
注释使用 {/* 注释内容 */}使用 <!-- 注释内容 -->
自闭合标签必须自闭合（如 <img />）可以有自闭合形式（如 <img>）
事件处理通过 camelCase 属性（如 onClick）使用小写字母（如 onclick）
表达式支持 JavaScript 表达式（如 {value}）仅支持固定文本，不支持 JavaScript
风格写法使用对象语法（如 style={{ color: 'red' }}）使用字符串（如 style="color: red;"）
条件渲染使用三元运算符或逻辑与（如 {condition ? <Component /> : null}）不支持条件渲染，需用 JavaScript 控制逻辑
版本控制使用 Babel 转换为 JavaScript直接由浏览器解析

4.JSX的参数

（1）属性值，如： <input value={text} />

如果作为属性值，那么这个“洞”里就可以放任何表达式，只要相应的组件能够处理，比如变量、函数、函数调用（JSX标签）

<div>{<input type="text" />}</div>

可以这样书写，不过大括号有点多余

（2）标签的嵌套内容，如：<div>{content}</div>

如果是作为标签的嵌套内容，那么该表达式的值就不能是一个对象（React 元素除外）。例如

function App() {const content = { name: '艾伦', age: 25 }return <div>{content}</div>
}

浏览器上就会出现如下错误：

Error
Objects are not valid as a React child (found: object with keys {name, age}). If you meant to

举例：map遍历标签数组

以下两种写法是等价的，当大括号内表达式为数组时，JSX会把数组内容解释为标签的“孩子”

// 1
<select>{[<option>艾伦</option>, <option>汉堡</option>]}
</select>// 2
<select><option>艾伦</option><option>汉堡</option>
</select>

因此 

function App() {const snacks = ['艾伦', '汉堡']return (<select>{ snacks.map(snack => <option>{snack}</option>) }</select>)
}

四、组件渲染可以看成手翻书

React 的工作过程就像播放手翻书动画。每调用一次组件函数，组件就返回手翻书的一页，调用多次，装订起来，快速一翻就形成了完整的交互界面。

代码演示

function App() {console.log("新一帧") // 加了这一句方便跟踪程序运行状况const [isDialogVisible, setIsDialogVisible] = React.useState(false)const dialog = (<div style={styles.dialogBackdrop}><div style={styles.dialogContainer}><div>消息对话框</div><button onClick={() => { setIsDialogVisible(false) }}>关闭</button></div></div>);return (<div style={styles.app}><div>观察者窗口主控界面</div><button onClick={() => { setIsDialogVisible(true) }}>打开消息对话框</button>{ isDialogVisible && dialog }</div>);
}

 如果用户点击打开消息对话框一次，并点击关闭，JavaScript 控制台上会出现几行 新一帧？

三行

第一行：APP首次渲染

第二行：点击打开消息对话框后再次渲染

第三行：点击关闭后再次渲染

五、react数据的不可变特性   

State 内的数据、Prop 和 React 元素都是不可变的 

 例如我们尝试修改和添加元素：

const [snacks, setSnacks] = useState([])
//添加新元素
snacks.push('芒果干')
//修改元素
snacks[5] = '巧克力'
//调用设置器
setSnacks(snacks)

上述修改是不起作用的，React 只要看到还是同一个数组，就会认为 State  中的数据没有发生任何变化。

正确方法是准备一个新数组：

// 添加新元素
const newSnacks = [...snacks, '芒果干']
setSnacks(newSnacks)// 替换 index 为 4 的元素
const newSnacks2 = [...snacks.slice(0, 4), '巧克力', ...snacks.slice(5)]
setSnacks(newSnacks2)

不可变特性同样也适用于对象、字符串和其他数据类型

为什么要不可变？

就单次操作来说，重建确实比直接修改慢，但是，从总体上来说，这种采用重建来修改状态的机制性能更优

在绝大多数的用户界面里，发生最普遍频繁的，不是对程序状态的修改，而是对状态数据的读取比对。如果我们约定所有的状态数据值都是不可变的，那么对其的比对操作的性能上就会有至少一个数量级的提升

相反，如果数据结构是不可变的，判断起来就容易很多：只需要做一个“浅层比较”，看看是不是同一个数组或对象就行了（下图）

所以，在最开始的例子里，即使我们替换了数组 snacks 内的元素、并调用 setSnacks(snacks)，由于 snacks 是同一个数组，React 会认为 State 并未发生改变，从而置之不理。

React 的适用场景：如果整个界面和程序状态大致不变、而需要非常频繁地读取比对系统状态

第三方库immer

背景：

我们通常使用展开操作符 ... 来复制并修改数组或对象，这种方法在数据结构简单时还算方便好用，然而有多层嵌套的对象或数组时，就会显得累赘

作用：

immer 会为我们生成一个新的实例，并保证它符合不可变约定，只需要set修改后的数据即可

使用方法：

npm install -S immer
import produce from 'immer'
...
function App() {const [todos, setTodos] = useState({...})...setTodos(produce(draft => {draft[1].status.isComplete = true
}))...
}

http://www.ppmy.cn/ops/129507.html

相关文章

【CS61A 2024秋】Python入门课，全过程记录（持续更新中）

【CS61A 2024秋】Python入门课，全过程记录（持续更新中）

文章目录 基本介绍&#x1f44b;Week 1Wed WelcomeDisc00Lab 00: Getting Started准备工作动手&#xff01;拓展一下 Fri Functions开篇材料阅读HW 01: Functions, ControlQ1: A Plus Abs BQ2: Two of ThreeQ3: Largest FactorQ4: Hailstone Week 2MonLab01: HW 01: Functions,…
阅读更多...
go语言静态资源打包——思悟项目技术3

go语言静态资源打包——思悟项目技术3

思悟项目&#xff1a; golang qq邮件发送验证码——思悟项目技术1 go语言gin框架平滑关闭——思悟项目技术2 Go 语言默认情况下打包并不会将静态文件直接包含在可执行文件中。Go 编译器只会打包 .go 源代码文件&#xff0c;静态文件&#xff08;如 HTML、CSS、JS 或图片等&am…
阅读更多...
jmeter自定义函数

jmeter自定义函数

jmeter本身带有很多内带的函数&#xff0c;功能很强大&#xff0c;但是更强大的是&#xff0c;jmeter还可以扩展&#xff0c;让用户自定义函数。 下面来看下自定义函数是怎么做的。 需要在org.apache.jmeter.functions包中&#xff0c;添加我们的自定义函数&#xff0c;函数模…
阅读更多...
Bash、sh 和 Shell都弄混了？

Bash、sh 和 Shell都弄混了？

在Linux和Unix系统中&#xff0c;Bash、sh 和 Shell 都与命令行解释器相关&#xff0c;但它们各自的含义和作用略有不同。以下是它们之间的关系和区别&#xff1a; Shell Shell 是一个通用术语&#xff0c;指的是操作系统中负责解释和执行用户命令的程序。它是用户与操作系统…
阅读更多...
用网页制作安装包——解密微软那些使用网页的exe

用网页制作安装包——解密微软那些使用网页的exe

我们见到的很多exe软件其实都是html做的ui 一、微软visual studio 安装解析 打开html文件 二、使用网页制作的软件很多 可牛&#xff0c;微软开发软件 win98桌面背景 常见的文件格式hta 三、hta 网页应用程序 HTA属性 播报 编辑 HTA与普通的网页结构差不多&#xff0c…
阅读更多...
Apache POI—读写Office格式文件

Apache POI—读写Office格式文件

Apache POI 是一个开源的 Java 库&#xff0c;用于读写 Microsoft Office 格式的文件&#xff0c;主要包括 Excel、Word 和 PowerPoint 等文档。POI 对 Excel 文件的支持最为完善&#xff0c;通过 POI 可以方便地进行 Excel 文件的创建、编辑、读取等操作。 1. Apache POI 简介…
阅读更多...
【Java SpringIOC与ID随感录】 基于 XML 的 Bean 装配

【Java SpringIOC与ID随感录】 基于 XML 的 Bean 装配

前言 我们知道了 Spring 是⼀个开源框架&#xff0c;他让我们的开发更加简单。他⽀持⼴泛的应⽤场 景&#xff0c;有着活跃⽽庞⼤的社区&#xff0c;这也是 Spring 能够⻓久不衰的原因。 这里来举个例子&#xff1a; 开发业务逻辑层一般是&#xff1a;控制层、业务逻辑层、持久…
阅读更多...
赛博威携手百度智能云，开启数字营销新未来

赛博威携手百度智能云，开启数字营销新未来

近日&#xff0c;赛博威集团华东大区苏州百捷信息科技&#xff08;以下简称“赛博威”&#xff09;与百度智能云正式达成解决方案销售伙伴关系&#xff0c;双方将在人工智能、大数据与云计算领域深度合作&#xff0c;为客户提供更全面、更高效、更智能的数字营销解决方案&#…
阅读更多...
最新文章

Copyright @ 2022~2023