hello-world

---

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 展现在界面上。流程图如下:

• 下篇文章我们再见。