编写第一个React页面
2019-02-18 本文已影响0人
毕安
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
// 后续实例代码大部分只需替换这个位置的script，即可在本地直接运行html文件查看效果
<script type="text/babel">
ReactDOM.render(
<h1>Hello, react!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
React 元素渲染
元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容，React 通过ReactDOM.render()对元素进行渲染。
ReactDOM.render(element, destination)包含两个参数，第一个参数是元素的内容，第二个参数是DOM节点，即元素的输出位置。
React的虚拟DOM是如何实现的
ReactDOM.render()的第一个参数通常是一个JSX对象
JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。
查询源码可以知道，当遇到HTML标签时，JSX会将html标签转化成createElement操作，动态创建出HTML元素。
最后ReactDOM.render()将动态创建的元素渲染到DOM节点上，这就是虚拟DOM了。
