React核心思维模型(一)

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

<div>Tom</div>

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

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

javascript 复制代码
document.getElementsByTagName('div').item(0) = 'Jerry'

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

javascript 复制代码
<div>{state}</div>
javascript 复制代码
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 代码。

例子一

javascript 复制代码
<div>Tom</div>

跟下面的代码是等效的

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

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

例子二

javascript 复制代码
<div className="mr-wall" />

//等价于

_jsx("div", { className: "mr-wall" })

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

例子三

javascript 复制代码
<div>
  <button />
</div>

//等价于

_jsx('div', { children: _jsx('button') })

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

例子四

javascript 复制代码
<div className="container">
  <div className="mr-wall"> {alan} </div>
  <button />
</div>

转换成 JavaScript:

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

2.JSX返回值

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

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

上述代码的打印结果是

javascript 复制代码
Object {type: "input", key: null, ref: null, props: Object, _owner: null}

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

3.JSX 和 HTML 的区别

举例比较

javascript 复制代码
// JSX
<input style={{ minWidth: 200 }} />
  
// HTML
<input style="min-width: 200px" />

为什么有两层大括号呢?

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

再看一个例子,HTML 的按钮是这样写的:

javascript 复制代码
<button onclick="alert('OK')">OK</button>

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

而 JSX 版本则是这样的:

javascript 复制代码
<button onClick={() => alert("OK")}>OK</button>

改成JavaScript:

javascript 复制代码
_jsx('button', { onClick: () => alert('OK')}, "OK")

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

其他区别:

特性 JSX HTML
语法 类似于 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标签)

javascript 复制代码
<div>{<input type="text" />}</div>     

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

(2)标签的嵌套内容,如:<div>{content}</div>

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

javascript 复制代码
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会把数组内容解释为标签的"孩子"

javascript 复制代码
// 1
<select>
  {[<option>艾伦</option>, <option>汉堡</option>]}
</select>

// 2
<select>
  <option>艾伦</option>
  <option>汉堡</option>
</select>

因此

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

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

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

代码演示

javascript 复制代码
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 元素都是不可变的

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

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

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

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

javascript 复制代码
// 添加新元素
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修改后的数据即可

使用方法:

javascript 复制代码
npm install -S immer
javascript 复制代码
import produce from 'immer'
...
function App() {
  const [todos, setTodos] = useState({...})
  ...
  setTodos(produce(draft => {
    draft[1].status.isComplete = true
}))
  ...
}
相关推荐
ekskef_sef37 分钟前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6411 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻1 小时前
Vue(四)
前端·javascript·vue.js
蜜獾云1 小时前
npm淘宝镜像
前端·npm·node.js
dz88i81 小时前
修改npm镜像源
前端·npm·node.js
Jiaberrr2 小时前
解锁 GitBook 的奥秘:从入门到精通之旅
前端·gitbook
顾平安3 小时前
Promise/A+ 规范 - 中文版本
前端
聚名网3 小时前
域名和服务器是什么?域名和服务器是什么关系?
服务器·前端
桃园码工3 小时前
4-Gin HTML 模板渲染 --[Gin 框架入门精讲与实战案例]
前端·html·gin·模板渲染
不是鱼3 小时前
构建React基础及理解与Vue的区别
前端·vue.js·react.js