一、react入门

1.1 React的基本认识

　　1）、Faceboock开源的一个js库

　　2）、一个用来动态构建j用户界面的s库的

　　3）、React的特点：

　　　　Declarative(声明式编码)

　　　　Component-Based(组件式编程)

　　　　Learn Once, Write Anywhere(支持客户端服务器渲染)

　　　　高效、单项数据流

　　4）、React高效的原因

　　　　虚拟(virtual)DOM,不总是直接操作DOM(批量更新，减少更新次数)高效的DOM Diff算法，最小化页面重绘(减小页面更新的区域)

1.2 React的基本使用

　　1）、导入相关的js库（react.js，react-dom.js，babel.min.js）

　　2）、编码:

　　　　　　

　　　　　　

　　　　　　　　let aa = 123;

　　　　　　　　let bb = "text";

　　　　　　　　ReactDOM.render(

{aa}

,containerDOM)

　　　　　　

1.3 jsx的理解和使用

　　1）、理解：

　　　　全称 javascript jsx

　　　　react定义的一种类似于XML的js扩展语法：XML+js

　　　　作用：用来创建react虚拟DOM（元素）对象

　　2）、编码相关

　　　　js中直接可以嵌套标签，但标签要套js需要放在{ }中　　

　　　　在解析显示js数组时，会自动遍历显示

　　　　把数据的数组转换为标签数组：

　　　　　　let liArr = dataArr.map((item,index) =>{

　　　　　　　　return

{item}

　　　　　　})

　　3）、注意：

　　　　标签必须有结束、

　　　　标签的class必须改为className属性、

　　　　标签的style属性必须为双{{ }}列：{{color:"red",width:"12px"}}

1.4 几个重要概念理解

　　1）、模块与组件

　　　　1、模块：

　　　　　　　　理解：向外提供特定的功能的js程序，一般就是一个js文件、

　　　　　　　　为什么：js代码更多更复杂、

　　　　　　　　作用：复用js，简化js的编写，提高js的运行效率、

　　　　2、组件：

　　　　　　　　理解：用来实现特定功能效果的代码集合（HTML、CSS、JS）、

　　　　　　　　为什么：一个界面的功能太过于复杂、

　　　　　　　　作用：复用编码、简化项目界面编码，提高运行效率

　　2）、模块化与组件化　　　　

　　　　1、模块化：

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

　　　　2、组件化：

　　　　　　　　当应用是以多个组件的方式实现功能，这个应用就是组件化的应用、

 二、react的组件化开发

2.1 基本理解和使用

　　1）、 自定义标签：组件类（函数）标签

　　 2）、创建组件：

　　　　方式一：function myComponent1(props){

　　　　　　　　　　return(

自定义组件标题

)

　　　　　　　　}

　　　　方式二：ES6语法（复杂组件推荐使用）

　　　　class MyComponent 2 extends React.Component{

　　　　　　render(){

　　　　　　　　return(

类组件声明方式

)

　　　　　　}

　　　　}　　

　　3）、渲染组件标签　

　　　　ReactDOM.render(, cotainerEle)

　　4）、ReactDOM.render( )渲染组件标签的基本流程

　　　　React内部创建组件实例对象/调用组件函数、得到虚拟DOM对象，

　　　　将虚拟DOM解析成真是DOM，插到指定页面元素内部。

2.2 组件的三大属性之：props

　   所有组件标签的属性集合对象，给标签指定属性，

　　保存外部数据（可能是个undefind）

　　在组件内部读取属性：this.props.porpertyName

　　作用：从目标组件外部向组件内部传递数据（也就是父传子）；

　　对props中的属性值进行类型限制和必要性限制

2.3 组件的三大属性之：state

　　1）、组件被称为 “状态机”，页面的显示是根据组件的state属性的数据来显示

　　2）、初始化定义：

　　　　constructor(props){

　　　　　　super(props);

　　　　　　this.state={ active:1}

　　　　}

　　3）、读取显示：

　　　　this.state.active

　　4）、更新状态==》更新界面显示：

　　　　this.setState({active:0})

2.4 组件的三大属性之：refs

　　组件内包含ref属性的标签的元素集合对象

　　给操作目标标签指定ref属性，打一个标识

　　在组件内部获取标签对象：this.refs.refName(只得到了标签元素对象)

　　作用：找到组件内部的真实dom元素对象，进而操作

2.5 组件中的事件处理

　　1）、给标签添加属性：onXxx={this.eventHandler}

　　2）、在组件中添加事件处理方法

　　　　eventHandler(e){

　　　　}

　　3）、使自定义方法中的this作为组件对象

　　　　在constructor()中bind(this)使用箭头函数定义方法(ES6模块化编程时才能使用)

　　4）、事件监听

　　　　绑定事件监听  事件名  会掉函数

　　　　触发事件 用户对相应的界面做对应的操作

2.6 组件的组合使用

　　1）、拆分组件：拆分界面，抽取组件

　　2）、实现静态组件：使用组件实现静态效果

　　3）、显示动态组件：

　　　　1、动态显示初始化数据

　　　　2、交互功能（从绑定事件监听开始）

2.7 组件的生命周期

　　1）、组件的三个生命周期状态：

　　　　Mount：插入真实DOM

　　　　Update：被从新渲染

　　　　Unmount：被移除的真实DOM

　　2）、生命周期流程

　　　　1、第一次初始化显示：ReactDom.render（,containDom）

　　　　　　constructor();

　　　　　　componentWillMount()：将要插入回调

　　　　　　render（）:用于插入虚拟DON回调

　　　　　　componentDidMount()：已经插入回调

　　　　2、每次更新state：this.setState({ });

　　　　　　componentWillReciveProps():j接收父组件更新新的属性（redux更新的也能获取）

　　　　　　componentWillUpdate()：将要更新回调

、　　　　　render（）：更新（重新渲染）；

　　　　　　componentDidUpdate()：组件将要移除回调

　　　　4、常用的方法

　　　　　　render（）：必须填写，返回一个自定义的虚拟DOM

　　　　　　constructor（）：初始化状态,绑定this可以箭头函数代替；

　　　　　　componentDidMount()：只执行一次，已经在DOM树中，适合启动/设置一些监听

　　　　　　组件生命周期（http://i.imgur.com/hSkhD9f.png）　　　　

2.8 虚拟DOM与DOM、Diff算法

　　1）、虚拟DOM是什么？

　　　　一个虚拟DOM（元素）是一个一般的js对象，准确地说是一个对象树（倒立的DOM树）

　　　　虚拟DOM保存了真实DOM的层次关系和一些基本属性，与真实DOM一 一对应

　　　　  如果只是更新虚拟DOM页面不会重绘额

　　2）、Virtual Dom 算法的基本步骤

　　　　用js对象树表示DOM树的结构，然后用这个树构建一个真正的DOM树插到文档中

　　　　  当状态变更的时候，从新构造一个这样的对象树，然后用新的树和旧的树进行比较，记录两颗树差异

　　　　  把差异应用到真实DOM树上，视图就更新了

　　3）、进一步了解

　　　　  Virtual DOM 本质就是在 js 和 DOM 之间做了一个缓存。

2.9 命令式与声明式编程

　　声明式编程

　　　　只关注做什么，不关注怎么做（也就是流程），类似填空题。

　　命令式编程

　　　　既要关注做什么，也要关注怎么做，类似于问答题

 没理解对的地方，还望纠正，指教。

每天记录一节、促进自己成长加深印象，内容只限于初学者。

?( ′???` )比心