标签：资源 har develop 设置 客户端 组件 重绘 如何 本地库
1.React由Facebook开源
用于构建用户界面的 JavaScript 库
相关网站
声明式编码（Declarative）
告诉机器你想要的是什么，让机器去实现。而无需告诉机器如何去实现
组件化编码(Component-Based)
组件：用来实现特定功能代码和资源的集合（html/css/image）
支持客户端和服务器端渲染
更高效
使用虚拟DOM
用虚拟DOM映射真实DOM，新增标签的时候修改的是虚拟DOM,真实DOM不发生改变，当我们完成所有操作进行打包渲染页面时，真实DOM会发生改变，这样减少了页面渲染次数
引入文件
react.js：React的核心库。这个包，是专门用来创建React组件、组件生命周期等。
react-dom.js:操作DOM的扩展库。这个包，主要封装了和 DOM 操作相关的包（比如，把组件渲染到页面上）。
babel.min.js:将 JSX语法 解析为 纯JS语法代码。
本地库引入并实现第一个hello react
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
//也可以使用https://www.bootcdn.cn所提供的库进行引入
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
//创建页面元素
<div id="root"></div>
<!-- 这里script的type属性要设置成text/babel，因为我们要借助babel将jsx翻译成js -->
<!-- 浏览器会优先读取type=/text/javascript中的内容 -->
<script type="text/babel">
/*创建虚拟DOM*/
let vDOM = <h1>Hello, world!</h1>
/*渲染页面*/
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(‘root‘)
);
</script>
</body>
</html>上例中语法：
ReactDOM.render(要渲染的虚拟DOM对象, 容器 container：要渲染到页面上的哪个位置);
分别使用JS语法和jsx语法创建虚拟DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"> </script>
<div id="test1"></div>
<div id="test2"></div>
<script type="text/javascript">
let myID = ‘root‘
let myData = ‘rootyonghu‘
let vDOM = React.createElement(‘h2‘,{id:myID.toLowerCase()}, React.createElement(‘span‘,{},myData.toLowerCase()))
ReactDOM.render(
vDOM,
document.getElementById(‘test1‘)
);
</script>
<script type="text/babel">
/*创建虚拟DOM*/
let vDOM1 = (
<h2 id = {myID.toUpperCase()}>
<span>
{myData.toUpperCase()}
</span>
</h2>)
/*渲染页面*/
ReactDOM.render(
vDOM1,
document.getElementById(‘test2‘)
);
</script>
</body>
</html>由上面可见使用JavaScript方式创建节点更加繁琐，层层嵌套，使用jsx可以大大简化开发
React.createElement(需要创建的元素类型, 有哪些属性, 子节点)
标签：资源 har develop 设置 客户端 组件 重绘 如何 本地库
原文地址：https://blog.51cto.com/14542112/2551335
