React

React 哲学_更新流程

Scheduler (调度器)

• 维护时间切片（类似requestIdleCallback）
• 与浏览器任务调度
• 优先级调度

Reconciler (协调器)

• 将 JSX 转化为 Fiber
• Fiber 树对比（双缓存）
• 确定本次更新的 Fiber

Render (渲染器)

• 渲染器用于管理一棵 React 树，使其根据底层平台进行不同的调用

用 React 开发 web 应用

架构： 打包配置：JSX -> babel -> JS 加载优化和错误降级。

路由： React Router 向应用中快速地添加视图和数据流，保持页面与URL 间的同步。

UI： 可复用UI -> 组件 -> 页面。可复用逻辑抽离成 hook 。

状态： 多页面多组件共享信息 redux & context。

用 React 开发 web 应用_组件

数据： 通过定义 state 操作视图

Mount 时获取数据更新 stateRef 保存与视图无直接关系的值

unMount 前清空 Ref

通信： props 父子组件通信

context & redux 组件信息共享

性能 函数使用 useCallback

值或者计算使用 useMemo

组件包裹 memo

UI 数据决定视图

通过 Ref 获取到 DOM

组件

函数式 相较于 Class 的优点

• 代码量骤减，组件干净清爽
• 没有复杂的生命周期
• 支持自定义 hook ，逻辑复用方便。

组件 和 hook 的关系

• 将 UI 拆成多个独立单元，这些单元组合可以构成多种视图展示，这些独立单元就是组件。组件相当于原子。
• hook 贴近组件内部运行的各种概念逻辑，effect、state、context等。hooks 更贴近于电子。

Hook 过期闭包问题

    function createIncrement(i) {
        let value = 0;

        function increment() {
            value += i;
            console.log(`Increment value is ${value}`);
            const message = `LogValue is ${value}`;

            function logMessage() {
                console.log(message);
            }
            return logMessage;
        }

        return increment;
    }

    const inc = createIncrement(1);
    const log = inc(); // Increment value is 1
    inc(); // Increment value is 2
    inc(); // Increment value is 3
    log(); // LogValue is 1

在JS中，函数运行的上下文是由定义的位置决定的，当函数的闭包包住了旧的变量值时，就出现了过期闭包问题。

function WatchCount() {
    const [count, setCount] = useState(0)
    
    useEffect(() => {
        const id = setInterval(() => {
            console.log(`Current Count is ${count}`);
        }, 1000);
        
        return () => clearInterval(id);
    }, []);
    
    const increment = () => setCount(count + 1);
    return (
        <div>
            {count}
            <Button onClick={increment}>Increment</Button>
        </div>
    )
}

----end----