React基础

React特点

1. 采用组件化模式、声明式编码，提高开发效率及组件复用率
2. 在React Native中可以使用React语法进行移动端开发
3. 使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互

需要的基础：

• 判断this的指向
• class类
• ES6语法规范
• npm包管理器
• 原型原型链
• 数组常用方法
• 模块化

Hello,React

在写之前需要准备好一个容器

<!--准备好一个"容器"-->
<div id="test"></div>

script中写jsx代码，所以标签格式有所变化

<script type="text/babel">
      // 此处一定要写babel，不写默认js，是不可以的
      // 1. 创建虚拟dom
      // 此处一定不要写引号，因为不是字符串是虚拟DOM
      const VDOM = <h1>Hello,React</h1>;
      // 2. 渲染虚拟DOM到页面
      ReactDOM.render(VDOM, document.getElementById("test"));
		//   关于虚拟DOM：
      /*
        1. 本质时object类型的对象（一般对象）
        2. 虚拟dom比较“轻”，真实dom比较“重”，因为虚拟dom时react内部在用，无需真实dom上那么多的属性
        3. 虚拟dom最终会被react转化为真实dom呈现在页面上
    */
    </script>

jsx语法规则：

          1. 定义虚拟DOM时，不要写引号
          2. 标签中混入JS表达式要用{}
          3. 样式的类名指定不要用class，要用className
          4. 内联样式，要用style={{key：value}}的方式去写
          5. 虚拟DOM必须只有一个根标签
          6. 标签必须闭合
          7.标签首字母
          7.1 若小写字母开头，则将该标签改为html中同名元素，若html中无该标签对应的同名元素，则报错
          7.2 若大写字母开头，React就去渲染对应的组件，若组件没有定义，则报错

一定注意区分【js语句】与【js表达式】

1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
   下面这些都是表达式：（1）a （2）a+b（3）demo(1) （4）arr.map() （5）function test() {}
2. 语句（代码）：
   下面这些可以成为语句（代码）：
   （1）if(){} （2）for(){} （3）switch(){case:xxx}

模块与组件

模块

1. 向外提供特定功能的js程序，一般就是一个js文件
2. 原因：随着业务逻辑增加，代码越来越多且复杂
3. 作用：复用js，简化js的编写，提高js运行效率

组件

1. 用来实现局部功能效果的代码和资源的集合（html/css/image等等）
2. 原因：一个界面的功能更复杂
3. 作用：复用编码，简化编码，提高运行效率

模块化

当应用的js都以模块来编写，这个应用就是一个模块化的应用

组件化

当应用时以多组件的方式实现，这个应用就是一个组件化的应用