React入门 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第10天，记录一下之前课上关于 React 的基础知识。

一、本节课主要内容

1. React 的设计思路
2. React（hooks）的写法
3. React 的实现
4. React 中的状态管理

二、详细知识点介绍

1. React 的设计思路

• UI 编程痛点
  • 状态更新：需要手动调用 DOM 接口对 UI 进行更新
  • 欠缺代码层面的封装和隔离
  • UI 之间的数据依赖关系需要手动维护
• 响应式编程
  • 状态更新时 UI 自动进行更新
  • 组件化，可复用，可封装
  • 状态之间的相互依赖关系，只需声明即可
• 组件化
  • 组件是原子组件或组件的组合
  • 组件内拥有状态，外部不可见
  • 组件声明了状态和 UI 的映射
  • 父组件可将状态传入组件内部
• 生命周期

2. React（hooks）的写法

• useState：传入一个初始值，返回一个状态和一个设置该状态的函数，可以通过调用该函数来实现状态的修改 一个简单的计数器的例子如下面代码所示：

function Counter() {
    const [count, setCount] = userState(0)
    
    return (
        <div>
            <p>You clicked { count } times.</p>
            <button onClick={ ()=> setCount(count + 1) }>Click me</button>
        </div>
    )
}

副作用（useEffect）：传入一个函数和一个数组，数组是由状态组成的数组（依赖项），该函数在组件 mount 时和依赖项被修改时都会执行

• 当不传入第二个参数时可以用于监听状态的变化

useEffect(() => {
    console.log(`You clicked ${count} times.`)
})

• 当第二个参数传入一个空数组时，则回调函数只在组件 mount 时执行一次

3. React 的实现

• 将 JSX 语法转译为对应的 JS 语法（使用React.createElement）
• 虚拟 DOM：是一种用于与真实 DOM 同步，而在 JS 内部维护的一个对象，其具有和 DOM 类似的树状结构，并和 DOM 可以建立一一对应的关系。虚拟 DOM 赋予了 React 声明式的 API，当状态改变时，React 将确保 DOM 匹配该状态。
• Diff 算法

4. 状态管理

• 核心思想：将状态抽离到 UI 外部进行统一管理
• 推荐库：redux、xstate、mobx、recoil

三、课后个人总结

这节课上老师主要讲解了 React 的一些入门知识。在我看来 React 和 Vue 的主要区别在于：

1. React 使用基于 JSX 语法的函数式组件，更加灵活；而 Vue 使用基于模板的单文件组件，更容易上手；
2. React 通过将状态的读操作和写操作进行抽离实现响应式，而 Vue 中对状态的读和写都可以通过ref、reactive这一类 API 实现，通过proxy实现状态的响应式更新，在编写代码时后者更符合直觉。

四、引用参考