响应式系统与React| 青训营笔记

233 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第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>
  );
}