title: Hello World
date: 2019-04-02 10:10:30
tags: [React,jsx]
categories: React
copyright: true
跟着我们上一篇内容继续走,开始实现我们的“hello,world”,本篇实现了第一个hello,world,和关于jsx以及React虚拟元素知识。
那么开始吧!
最简单的hello, world
就是在src文件夹下的index.js文件中这样写,其中引入的ReactDOM上的方法render是将react虚拟dom转换并渲染到页面的关键。
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
当然这样是实现了,这标志着你这是进入react一个激动的瞬间。
More info: 官方实例
我们还需要了解
现在还没有进入到重点,但是我们需要明白一些react的知识。
JSX与虚拟dom
const element = <h1>Hello, world!</h1>;
这个有趣的标签语法既不是字符串也不是 HTML。
它被称为 JSX,是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能。
JSX 是一种语法糖, 经过 babel 转换结果如下, 可以发现实际上转化成 React.createElement()
的形式:
扩展: babel 执行机制
因此, 我们得出结论: JSX 语法糖经过 Babel 编译后转换成一种对象, 该对象即所谓的虚拟 DOM
, 使用虚拟 DOM 能让页面进行更为高效的渲染。
Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
上面的和下面的实例代码完全等效
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
所以以下两种方式在页面渲染,最终都是一样的。
let h1Ele = React.createElement('h1', null, 'hello world');//通过React创建一个h1的虚拟dom节点,其实就是一个h1节点的描述对象
ReactDOM.render(h1Ele, document.querySelector('#root'));//使用ReactDOM的render方法将虚拟节点转换并添加到指定的节点之中
ReactDOM.render(<ul>就写下中文</ul>, document.querySelector('#root'));//这个就是jsx帮我们做了剩下的事
但是你也发现了这样一个一个创建dom不是太慢了吗,当我们需要创建多个同样结构的时候怎么办?
let ulEle = React.createElement('ul',//第一个参数
{//第二个参数,如果通过迭代的方式生成第三个参数的内容时,要添加key属性要唯一
key: 'ul0',//时react内部的算法会用,有唯一性和稳定性
style: { background: 'lightblue' }//样式写在这里,用{}表达式包裹
},
['HTML', 'CSS', 'JS'].map(item => React.createElement('li', { key: item, style: { color: 'red' } }, item)))
ReactDOM.render(ulEle, document.querySelector('#root'));
console.log(ulEle);
但是有了jsx为什么我们不用呢?
const pp = (
<ul>
<li>HTML</li>
<li style={{ color: 'red' }}>CSS</li>
<li onClick={() => console.log(1)}>JS</li>
</ul>
)
ReactDOM.render(pp, document.querySelector('#root'));
我们还可以再改进一下。
const p1 = (
<ul>
{
['HTML', 'CSS', 'JS'].map(e => <li key={e} style={{ color: '#312465' }}>{e}</li>)//li里面的内容也要用{包起来},不然内容都是e
}
</ul>
)
ReactDOM.render(p1, document.querySelector('#root'));
jsx其实本质也是转换成了使用React.creatElement创建的内容,只是我们的脚手架中的工具帮我们监听着jsx语法的代码出现,就会帮我们转换了,应为脚手架中使用了webpake,webpake里面用到了babel(就是专门转换jsx语法的工具)
小结
JSX
经过 babel 编译为 React.createElement() 的形式, 其返回结果就是 Virtual DOM
, 最后通过 ReactDOM.render() 将 Virtual DOM 转化为真实的 DOM 展现在界面上。流程图如下:
- 下篇文章我们再见。