「React基础学习二」 | 青训营笔记

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

React （hooks）的写法

React 两大写法之一的 Hooks 写法，该写法也是目前学企界中常用的写法之一。

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 {count} times</p>
            <button onClick={()=> setCount( count + 1)}>
                click me
            </button>
        </div>
    );
}

• 副作用：组件内部执行的一些操作会更改组件外部的某些状态；
• 如果是副作用就需要用useEffect这个函数去执行；

import React, { useState } from 'react ';


function Example(){
    const [count, setCount] = useState(0);
    // Similar to componentDidMount and componentDidUpdate:
    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>
    );
}

React的实现

React的实现基本概要

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

React的基本实现-Problem1

React的基本实现-Problem2

Virtual DOM（虚拟DOM)

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

它赋予了React声明式的API:您告诉React希望让UI是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

React的基本实现-How to Diff?

• 完美的最小Diff 算法，需要O(n^3)的复杂度。
• 牺牲理论最小Diff，换取时间，得到了O (n)复杂度的算法:

Heuristic O(n) Algorithm