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

React

设计思路

UI 编程的痛点

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

响应式系统

设计与实现

响应式编程

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

组件化

组件是组件的组合或原子组件
组件内拥有状态，外部不可见
父组件可将状态传入组件内部（单向数据流）
组件设计

（1）组件声明了状态和 UI 的映射。

（2）组件有 Props 和 State 两种状态。组件内部拥有私有状态 State，组件接受外部的 Props 状态提供复用性。根据当前的 State / Props，返回一个 Ul 。

（3）“组件”可由其他组件拼装而成。

生命周期

细说React生命周期 - 爱码网

hooks 钩子

useState

useState是一个React钩子，让你添加一个状态变量到你的组件。

const [获取到的状态值, 设置该状态的函数] = useState(状态的默认值)

function App () {
    // 1. 声明一个状态变量
    const [ count, setCount ] = useState(0)
    // 2. 交互时设置状态
    function handleClick() {
   		setCount(count + 1);
  	}
    return (
        <!-- 3. 在UI中呈现状态 -->
        <button onClick={handleClick}>
          You pressed me {count} times
        </button>
  	);
}

注意：useState 不要写在循环或者判断语句里

useEffect

用于在函数组件中处理副作用，通常用于请求数据、事件处理、订阅等相关操作。

通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作。React 会保存你传递的函数（我们将它称之为 “effect”），并且在执行 DOM 更新之后调用它。传递给 useEffect 的函数在每次渲染中都会有所不同，这正是我们可以在 effect 中获取最新的状态变量的值，而不用担心其过期的原因。

副作用：

ajax请求

异步操作

定时器

本地存储

更改真实DOM对象

其他会对外部产生影响的操作

useEffect(effect, deps);
// effect: 函数，必传项。是组件要执行的副作用。
// deps: 可以不传或者是一个数组，非必传项。数组里面依赖改变时副作用函数才会重新更新。

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

function App() {
    const [data, setData] = useState( {hits: []} );

    useEffect(async () => {
        // 请求后端的数据
        const result = await axios(
            'http://localhost/api/v1/search?query=redux',
        );
        // 通过调用setData来更新本地的状态，这样会触发view的更新
        setData(result.data);
    }, []); // 传递一个空数组作为useEffect的第二个参数，避免因组件更新执行useEffect而造成的死循环，只会在组件mount时执行

    return (
        <ul>
            {data.hits.map(item => (
                <li key={item.objectID}>
                    <a href={item.url}>{item.title}</a>
                </li>
            ))}
        </ul>
    );
}
export default App;

虚拟DOM & 真实DOM

virtual DOM（虚拟 DOM）

Virtual DOM是一种用于和真实 DOM 同步，而在 JS 内存中维护的一个对象（真实 DOM 由浏览器维护），它具有和 DOM 类似的树状结构，并和 DOM 可以建立一一对应的关系。
Diff 算法

为了避免不必要的渲染，按需更新，虚拟 DOM 会采用 Diff 算法进行虚拟 DOM 节点比较，比较节点差异，从而确定需要更新的节点，再进行渲染。React 和 Vue 采用的是==深度优先，同层比较==的策略，若父节点变化，则其子组件会一并更新。

元素更新方法
不同类型的元素替换
同类型的DOM元素更新
同类型的组件元素递归

元素	更新方法
不同类型的元素	替换
同类型的DOM元素	更新
同类型的组件元素	递归

状态管理库

将需要组件共享的信息（如用户信息）抽离到 UI 外部进行统一管理。

React 状态管理库：redux、xstate、mobx、recoil

应用级框架

Next.js
Modern.js
Blitz

React | 青训营笔记