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

这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天

本堂课主要学习了关于React的一些理论、概念层面的知识。

React的设计与实现

响应式编程

React是一种响应式编程，相较于传统的UI编程，它具有以下优点：

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

组件化

组件是组件的组合或者原子组件；组件内拥有状态（Props和State），State属于组件的私有状态，组件接受外部的Props状态提供复用性；父组件能将状态传入子组件，反之不行。组件能根据当前的State和Props，返回一个UI。

两个组件共有的状态属于两个节点向上找到的最近的祖宗节点。

生命周期

Hooks

import React, { useState } from 'react';

function Example() {
  // 声明count为0，声明更改count的方法setCount
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在class中，通过在构造函数中设置this.state为{ count:0 }来初始化 count state为0，但在函数组件中，没有this，所以不能分配或读取this.state,通过在组件中调用useState这个钩子来声明state变量。

虚拟DOM

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

在状态改变后，通过diff算法来找出更改的节点，再重新渲染虚拟DOM，再将渲染后的虚拟DOM映射到真实的DOM上。

• 对于不同类型的元素————替换
• 同类型的DOM元素————更新
• 同类型的组件元素————递归