1.React入门

1.1 React简介

1.1.1 React官网

1.英文官网: https://reactjs.org/
2.中文官网: https://react.docschina.org/

1.1.2 介绍描述

1.用于动态构建用户界面的 JavaScript 库(只关注于视图)
2.由Facebook开源

1.1.3 React的特点

1.声明式编码
2.组件化编码
3.React Native 编写原生应用
4.高效（优秀的Diffing算法

1.1.4 React高效的原因

1.使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
2.DOM Diffing算法, 最小化页面重绘。

---

1.2 React的基本使用

1.2.1 代码和效果

//注意引入顺序
<div id="test"></div>
    <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">
//创建虚拟dom
const VDOM=<h1><span id="tt">Hello</span></h1>;//jsx语法
//渲染虚拟dom到页面
ReactDOM.render(VDOM,document.getElementById("test"));
</script>

1.2.2 相关js库

1.react.js：React核心库。
2.react-dom.js：提供操作DOM的react扩展库。
3.babel.min.js：解析JSX语法代码转为JS代码的库。

1.2.3 虚拟dom的两种创建方式

//原生js创建虚拟dom（不建议使用）
<div id="test"></div>
<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/javascript">
    //创建虚拟dom
    const VDOM=React.createElement('h1',{id:'tt'},'hello');
    ReactDOM.render(VDOM,document.getElementById('test'));
</script>
//另外就是使用jsx方式

1.2.4 虚拟dom与真实dom

/*虚拟dom：1.本质是object类型的对象
*2.虚拟dom 比较“轻”，真实dom比较重，因为虚拟dom只在react内部使用*/
1.React提供了一些API来创建一种“特别”的一般js对象
const VDOM=React.createElement('xx',{id:'xx'},'xx')
上面创建的就是一个简单的虚拟DOM对象
2.虚拟DOM对象最终都会被React转换为真实的DOM
3.我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。

---

1.3 React JSX

1.3.1 jsx语法规则

1.定义虚拟dom时不要写引号
2.标签中混录JS表达式时要用{}
3.样式的类名指定不要用class，要用calssName
4.内联样式，要用style={{key:value}}的形式,key值要是驼峰形式才会生效
5.只有一个根标签
6.标签必须闭合
7.标签首字母
 (1)若小写字母开头，则将标签转为html中同名元素，若html中没有该标签则报错
 (2)若大写字母开头，react就去渲染对应的组件，若没有该组件，则报错
    //实例1
    const a='hello1'
    const VDOM=<h1 className="ttrr" >
        <span style={{color:'red',fontSize:'50px'}}>{a}</span>
        </h1>;
    ReactDOM.render(VDOM,document.getElementById('test'));
    //实例2：
    const data=["angular","vue","react"];
    const VDOM=<div><h1 className="ttrr" >hell</h1>
        <ul>{
            data.map(function (item,index) {
                return <li key={index}>{item}</li>
            })
        }</ul>
    </div>;
    ReactDOM.render(VDOM,document.getElementById('test'));

1.4 模块与组件、模块化与组件化的理解

1.4.1模块

1.理解：向外提供特定功能的js程序, 一般就是一个js文件
2.为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
3.作用：复用js, 简化js的编写, 提高js运行效率

1.4.2 组件

1.理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
2.为什么要用组件： 一个界面的功能更复杂
3.作用：复用编码, 简化项目编码, 提高运行效率