React | 青训营笔记

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

React的设计思路

• UI编程痛点

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

• 响应式系统：事件== >执行回调== >状态变更

• 前端UI：事件== >执行回调== >状态变更== >UI更新

• 响应式编程：

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

• 组件化：

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

• React是单向数据流

Hooks

import React,{useState,useEffect} from 'react'
function Example(){
    // Declare a new state variable, which we'll call "count"
    const [count,setCount] = useState(0)
    
    // useEffect对外部执行操作
    useEffect(()=>{
        //Update the document title using the broser API
        document.title = `You clicked ${count} times`
    })
    
    return(
    <div>
        <p>You clicked {count} times</p>
        <button onClick={()=>setCount(count+1)}>
            Click me
        </button>
    </div>
    )
}

• useState函数：传入一个初始值，返回一个状态和设置该状态的值，通过调用该函数实现状态的修改
• useEffect函数：传入一个函数和一个数组，数组是状态数组，又称依赖项；该函数在mount时以及依赖项set时执行

Diff算法

原理

为了提高效率，react选用JS对象模拟Dom树，对其进行操作从而提升性能

虚拟Dom（virtual Dom）=标签（tags）+属性（props）+子元素（children）

两个假设：

0. 两个相同组件将会生成相似的DOM结构，两个不同组件将会生成不同的DOM结构
1. 对于同一层次的一组子节点，它们可以通过唯一的id进行区分

依据假设对于同一层次的一组子节点，它们可以通过唯一的 key 进行区分，通过给每个节点添加唯一的 key，可以极大的简化 diff 算法，减少对 DOM 的操作

元素操作：

• 不同类型的元素：替换
• 同类型元素：更新
• 同类型组件：递归

应用级框架

0. Next.js：SSR渲染，页面构建迅速
1. Modern.js
2. Blitz