这是我参与「第四届青训营 」笔记创作活动的的第5天
1. React应用与特性
React应用
- 网页可开发
- 移动短开发Instagram, Discord
- 结合Electron进行桌面端开发
- 3D绘图react-three-fiber
React的特性:
Seamless Client Server Rendering: 可以客户端渲染, 也可以服务端渲染
Reactive: 响应式的,无需手动更新DOM
Performance: 性能
Structural: 组件式的, 使用函数定义
2. React的设计思路
React为什么会出现?那是因为原生JS存在一下缺陷,我们先来了解一下原生JS存在哪些缺陷,这样才能更清楚React设计思路。
原生JS的缺陷
- 状态更新不更新UI
- 基本代码层面缺乏封装与隔离, 无组件化
- UI与数据之间的依赖关系需要系统维护(造成回调地狱)
原生JS
对于UI
和数据之间的变化不够灵活,因此在React中需要MVVM
系统的设计思路
- 转换式系统: 给定输入, 得到输出
- 响应式系统: 监听事件, 消息驱动. 事件 -> 执行回调 -> 状态变更
对React的需求
- 状态更新UI更新
- 组件化前端代码(最好是语义化的组件): 组件是组件的组合, 组件内部维护状态, 外部不可见, 父组件可以将数据传入组件内部
- 无需手动维护状态之间的依赖关系, 只需要声明依赖关系
状态设计
- 状态传输是单向数据流
- 状态变化应该更新DOM
- 公共状态应该由状态管理库管理(否则就要放在最近公共祖先节点(大多数情况下是root))
组件设计
- 组件声明了状态与UI的映射
- 组件是组件与原子组件的自由组合
- 组件的状态有父组件传入的数据(Props)与组件内部的私有数据(State)
React(hooks)写法
这里以一个简单计数器为实例:
import { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
// 类似于 componentDidMount 和 ComponentDidUpdate
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}