react全家桶笔记总结（1）

React的特点

1.声明式编码

2.组件化编码

3.React Native 编写原生应用

4.高效（优秀的Diffing算法）

React高效的原因

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

安装与创建

安装：
npm i create-react-app -g
安装脚手架

create-react-app myreact
创建项目

cd /myreact
进入项目目录

 npm start  启动项目
npm run eject  暴露webpack配置文件
npm run build 打包项目

创建虚拟DOM的两种方式

1.纯JS方式

2.JSX方式 

虚拟DOM与真实DOM 

1. React提供了一些API来创建一种 “特别” 的一般js对象

const VDOM = React.createElement('xx',{id:'xx'},'xx')

    2.虚拟DOM对象最终都会被React转换为真实的DOM

    3. 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界

 React JSX（JavaScript XML）

1. react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
2. 作用: 用来简化创建虚拟DOM
   1. 写法：var ele = <h1>Hello JSX!</h1>
   2. 注意1：它不是字符串, 也不是HTML/XML标签
   3. 注意2：它最终产生的就是一个JS对象
3. 标签名任意：HTML标签或其他标签
4. 标签属性任意：HTML标签属性或其他
5. 基本语法规则 

            1).遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析

            2).遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含

      6.babel.js的作用

1. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
2. 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

      渲染虚拟DOM（元素）

         1.语法:. ReactDOM.render(virtualDOM, containerDOM)

         2.作用:将虚拟DOM元素渲染到页面中的真实容器DOM中显示

         3.参数说明:

                1). 参数一:纯js获取jsx创建的虚拟dom对象

                2).参数二:用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

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

 模块

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

 组件

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

 模块化

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

组件化

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