1、React的基本认识
官网:
1) 英文官网: https://reactjs.org/
2) 中文官网: https://doc.react-china.org/
介绍描述:
1) 用于构建用户界面的 JavaScript 库(只关注于View)
2) 由Facebook开源
React 特点:
1) Declarative(声明式编码)
2) Component-Based(组件化编码)
3) Learn Once, Write Anywhere(支持客户端与服务器渲染)
4) 高效
5) 单向数据流
React 高效的原因:
1) 虚拟(virtual)DOM, 不总是直接操作DOM
2) DOM Diff算法, 最小化页面重绘
React 基本使用:
基本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>Title</title> <script src="../js/react.development.js"></script> <script src="../js/react-dom.development.js"></script> <script src="../js/babel.min.js"></script> </head> <body> <div id="test"></div> <script type="text/babel"> //创建虚拟Dom元素 const vDom = <h1>Hello React</h1>; //渲染虚拟 DOM 到页面真实 DOM 容器中 ReactDOM.render(vDom,document.getElementById('test')); </script> </body> </html>