响应式系统与 React | 青训营

怒码少年
82 阅读4分钟

前置知识：

1.HTML，CSS，JS基础

2.基础的数据结/算法知识，如二叉树，深度遍历等

3.会使用浏览器提供的DOM API 来修改DOM 更新UI

1.1 React 的历史与应用

1.1.1 应用场景

  1. 前端应用开发，如Facebook、ins、Netflix网页版
  2. 移动原生应用开发，如ins、Discord、Oculus。
  3. 结合Electron，进行桌面应用开发。

1.1.2 react的发展历史

react发展历史.png

其中FaxJS就是react的前身，图中提到的FaxJS的四个特性也是react一直在加强的。

2013年，react正式开源

react的生态and框架.png

1.2 React 的设计思路

1.2.1 UI编程的痛点

  1. 状态更新，UI不会自动更新，需要手动地调用DOM进行更新
  2. 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
  3. UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”

1.2.2 响应式编程

针对上面的问题，我们希望react能够：

  1. 状态更新，UI自动更新
  2. 前端代码组件化，可复用，可封装
  3. 状态之间的互相依赖关系，只需声明即可

1.2.3 组件化

组件化定义的一些原则

  1. 组件是组件的组合/原子组件
  2. 组件内拥有状态，外部不可见
  3. 父组件可将状态传入组件内部

共用的状态要上移。状态归属于两个节点向上寻找到最近的祖宗节点

组件设计

  1. 组件声明了状态和UI的映射
  2. 组件有Props/State两种状态
  3. “组件”可由其他组件拼装而成

组件设计的时候可以灵活运用已有的组件

1.3 React （hooks）的写法与 React 实现

1.3.1 React （hooks）的写法

ReactHooks是一种用于函数组件中管理状态和生命周期的特性。通过使用Hooks，可以使代码更加简洁、易读和易于维护。

首先，Hooks需要在函数组件的顶层作用域中使用，即在函数的最外层调用。不要在循环、条件判断或子函数中调用Hooks。这是因为React Hooks内部是链表结构的，如果调用顺序不正确，就会导致指针移动出错，数据存取出错。

useEffect用于在函数组件中执行副作用操作，比如订阅事件、请求数据等。useEffect接受两个参数，第一个是副作用操作的函数，第二个是一个依赖数组，用来控制副作用操作的触发时机。如果依赖数组为空，副作用操作只会在组件挂载和卸载时触发。例如：

import React, { useState, useEffect } from 'react';

function Example() {
  const [data, setData = useState([]);

  useEffect(() => {
    // 在组件挂载和卸载时执行副作用操作
    console.log('组件挂载和卸载时执行');

    return () => {
      // 在组件卸载时执行清理操作
      console.log('组件卸载时执行清理操作');
    };
  }, []);

  return (
    <div>
      {/* 渲染数据 */}
    </div>
  );
}

在上面的例子中，useEffect函数的第一个参数是一个回调函数，用于执行副作用操作。通过return语句，我们可以在组件卸载时执行清理操作。

除了useEffect，React Hooks还提供了其他的钩子函数，如useContext、useRef等，可以根据具体需求进行使用。它们可以帮助我们更好地管理组件的状态和生命周期，提高代码的可读性和可维护性。

1.3.2 React 实现

问题：

  1. JSX不符合JS标准语法
  2. 返回的JSX发生改变时，如何更新DOM
  3. State/Props更新时，要重新触发render函数

解决： 使用虚拟DOM，它是一种用于和真实DIM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系

它赋予了React声明式的API：您告诉React希望让UI是什么状态，React就确保DOM匹配该状态。这使得您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

1.4 React 状态管理库与应用级框架科普

1.4.1 React 状态管理库

之前我们在讲状态保存的时候，如果是多个组件共用就放在祖宗组件上，这其实很麻烦，这种情况下我们就可以使用React 状态管理库来帮助我们管理。

**原理：**把所有要共同使用的状态都推到组件外进行统一管理，要用的时候在申请就可以了

常见（也是比较推荐的）： redux、xstate、mobx、recoil等等

补充： 状态机：显示当前状态，收到外部事件，迁移到下一个状态。例如红绿灯就是一个状态机，它当前是某一种颜色（显示当前状态），过来一段时间（外部事件），他就会变成另外一个颜色（迁移到下一个状态）。

1.4.2 应用级框架科普

企业级react框架科普.png

还有antd等等，不止这些。

avatar
文章
阅读
粉丝