目录
隐藏
介绍
1) 用于构建用户界面的 JavaScript 库(只关注于View)
2) 由Facebook开源
特点
1) Declarative(声明式编码)
2) Component-Based(组件化编码)
3) Learn Once, Write Anywhere(React Native/支持客户端与服务器渲染)
4) 高效
5) 单向数据流
React高效的原因
1) 虚拟(virtual)DOM, 不总是直接操作DOM (文档/元素/属性/文本对象)
2) DOM Diff算法, 最小化页面重绘
基本使用
相关js库
1) react.js: React的核心库
2) react-dom.js: 提供操作DOM的react扩展库
3) babel.min.js: 解析JSX语法代码转为纯JS语法代码的库
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello,React</title>
</head>
<body>
<div id="test"></div>
<!--引入react核心库-->
<script crossorigin src="./js/react.development.js"></script>
<!--引入react专门用于操作DOM的js-->
<script crossorigin src="./js/react-dom.development.js"></script>
<!--引入babel-->
<script crossorigin src="./js/babel.min.js"></script>
<script type="text/babel">//用于将jsx代码转换为原生js代码
//1.创建一个虚拟DOM
let vDOM = <h2>hello,react</h2>
//2.渲染虚拟DOM到页面
ReactDOM.render(vDOM,document.getElementById('test'))
</script>
</body>
</html>