React总结

入门

特点

• Declarative(声明式编码)
• component-Based(组件化编码)
• Learn Once, WrITe Anywhere(支持客户端与服务器渲染)
• 高效

高效原因

• 虚拟(virtual)DOM, 不总是直接操作DOM
• DOM Diff算法, 最小化页面重绘, 减少重排重绘的次数

使用

相关js库

• react.js: React的核心库
• react-dom.js: 提供操作DOM的react扩展库
• babel.min.js: 解析JSX语法代码转为纯JS语法代码的库

编码

//引入相关库
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel"> //必须声明babel
  // 创建虚拟DOM元素
  const vDom = <h1>Hello React</h1> // 千万不要加引号
  // 渲染虚拟DOM到页面真实DOM容器中
  ReactDOM.render(vDom, document.getElementById('test'))
</script>

虚拟Dom

• React提供了一些API来创建一种 特别 的一般js对象

VAR element = React.createElement('h1', {id:'myTitle'},'hello')

• 上面创建的就是一个简单的虚拟DOM对象
• 虚拟DOM对象最终都会被React转换为真实的DOM
• 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面
• 创建虚拟Dom方法