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

React（hooks）的写法

useState

传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用该函数，来实现状态的修改。

useEffect

传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖项被set的时候会执行。

有"副作用”的函数，要传入useEffect来执行。副作用代表除了单纯的计算之外，还要做其它的一些事情，比如网络请求，更新DOM, localStorage存储数据等。


import React, { useState } from 'react';
function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>You clicked {cougt} times</p>
            <button onClick={() => setCount(count + 1) }>
            Click me
            </button>
        </div>
    );
}

import React, { useState, useEffect } from 'react';
function Example() {
    const [count, setCount] = useState(0);
    // Similar to componentD idMount and componentD idUpdate:
    useEffect(() => {
    // Update the document title using the browser API
    document. title =`You clicked ${count} times`;
    });
    return (
    <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1) }>
        Click me
        </button>
    </div>
    );
}

Hook使用法则

不要在循环，条件或嵌套函数中调用Hook。

React的实现

Problems

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

Solution

进行转译
采用Virtual DOM (虚拟DOM)

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

How to Diff?

完美的最小Diff算法，需要O(n^3)的复杂度。

牺牲理论最小Diff,换取时间，得到了0 (n)复杂度的算法：

Heuristic O(n) Algorithm

策略：

不同类型的元素 -> 替换

同类型的DOM元素 -> 更新

同类型的组件元素 -> 递归

React状态管理库

核心思想

将状态抽离到UI外部进行统一管理

常见的React状态管理库

redux、xstate、mobx、recoil

状态机

当前状态,收到外部事件,迁移到下一个状态

应用级框架科普

NEXT.JS

硅谷明星创业公司Vercel 的React开发框架，稳定，开发体验好，支持Unbundled Dev，swc等，其同样有Serverless 一键部署平台帮助开发者快速完成部署。口号是"Let's Make Web Faster"。
MODERN.JS

字节跳动Web Infra 团队研发的全栈开发框架，内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间。
Blitz

无API思想的全栈开发框架，开发过程中无需写API调用与CRUD逻辑，适合前后端紧密结合的小团队项目。

响应式系统与React（二）|青训营笔记