React实现的三大问题

1、JSX不符合JS语法规范

JSX return的html代码不符合JS的语法
所以我们通过转译

const Test = (props) => {
    const { url } = props;
    return (
        <div className="root">
            <img src={url} />
        </div>
    )
}

"use strict"
const Test = (props) => {
    const { url } = props;
    return /*#__PURE__*/React.createElement("div", {
        className: "root"
    }, /*#__PURE__*/React.createElement("img", {
        src = {url}
    }));
}

2、JSX发生改变时，DOM如何被更新

React提供了另外一个DOM树，叫做虚拟树（VDOM, virtual dom） , 它是基于DOM的另一个抽象层级。它由React应用元素组成。

一个React应用的state发生改变，首先会被应用于VDOM。如果VDOM的新state改变触发了UI的改变，ReactDOM库会通过只更新需要更新的部分来高效的去更新界面。

例如，如果只有一个元素的属性（attribute）发生了改变，React将会通过document.setAttribute（或者其他类似的东西）只更新Html元素的的属性。

当VDOM更新时，React将会比较此时的VDOM和之前的VDOM的快照。如果没有发生变化，真实的DOM不会改变。将新的VDOM与旧的VDOM比较的过程，称之为对比（diffing） 。