3-2-理解 JSX

事实上, JSX 会被一个 babel 的 编译器 转换成 JavaScript 代码.

比如下面这行 JSX 代码:

<div className="App">
  Hello React!
</div>

你可以打开 Bebel 的 REPL](https://babel.docschina.org/repl/), 把这段代码复制过去, 看看转换后会变成什么.

image.png

可以看到, 转换后的代码变成了:

React.createElement(
  "div",
  { className: "App" },
  "Hello React!"
);

它变成了一段标准的 JavaScript 代码.

调用了 React.createElement() 方法, 传入了一些参数.

这也是为什么当我们写 JSX 的时候, 必须要保证 React 这个变量出现在作用域内的原因.

这段代码运行之后会得到什么呢?

如果你去控制台打印一下, 你会发现得到一个对象. 是的!!!最终你会得到一个类似如下的对象:

{
  type: 'div',
  props: {
    className: 'App',
    children: 'Hello React!'
  }
};

当然, 实际上你会得到一个复杂的多的对象, 但无论如何, 你只是得到了一个 普普通通的 JavaScript 对象.

---

现在让你实现一个简化版的 ReactDOM.render() , 就没有那么难了.

你想想, 你拿到这个对象后, 先得到一个 type 的值 div , 于是你可以这样:

  document.createElement('div')

就得到了一个 div.

接下来, 照葫芦画瓢, 通过 DOM 操作, 我相信肯定可以给这个新创建的 div 添加一个 App 的类名,

再往里面添加一段内容, Hello React! .

最关键的一步, 把你创建的 div , 插入到在 ReactDOM.render() 传入的第二个参数所获取到的容器节点.

怎么样, 其实使用 react, 并没有什么魔法的地方, 本质上, 还是在使用熟悉的 JavaScript 而已.

Virtual DOM

Virtual DOM, 翻译过来也就是虚拟 DOM 的意思.

我们看看 JSX, 它本质上得到的只是一个 JS 对象. 这个对象描述了一份 DOM 结构, 哪里有个 div, 哪里有个 span, 这个 div有什么属性.

一个描述了 DOM 结构的对象并不是真正的浏览器的 DOM 元素. 它只是 JavaScript 的对象, 存在于计算机的内存里.只是一个虚拟对象，react会把这个虚拟DOM转换成真实的DOM.

而这个描述 DOM 结构的对象, 我们就叫他 Virtual DOM, 虚拟 DOM.

过程总结

1. jsx
2. Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用。
3. React 通过读取这些对象来构建 DOM 并保持数据内容一致。

---

补充一点语法

1. 行内样式：

ReactDOM.render(
    <p
        style={{
            border : '1px solid #000' 

        }}
    >hell,react</p>,
    document.getElementById('root')
)

2. 引入css文件

import './xx.css'