react小白知识点以及面试知识标题（1）React入门
一、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）、编码:
<div id="container"></div>
<script type="text/babel">
let aa = 123;
let bb = "text";
ReactDOM.render(<h1 id={bb}>{aa}</h1>,containerDOM)
</script>
1.3 jsx的理解和使用
1）、理解：
全称 javascript jsx
react定义的一种类似于XML的js扩展语法：XML+js
作用：用来创建react虚拟DOM（元素）对象
2）、编码相关
js中直接可以嵌套标签，但标签要套js需要放在{ }中
在解析显示js数组时，会自动遍历显示
把数据的数组转换为标签数组：
let liArr = dataArr.map((item,index) =>{
return <li key = {index}>{item}</li>
})
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(<h1>自定义组件标题</h1>)
}
方式二：ES6语法（复杂组件推荐使用）
class MyComponent 2 extends React.Component{
render(){
return(<h1>类组件声明方式</h1>)
}
}
3）、渲染组件标签
ReactDOM.render(<MyComp />, 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（<Xxx />,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 命令式与声明式编程
声明式编程
只关注做什么，不关注怎么做（也就是流程），类似填空题。
命令式编程
既要关注做什么，也要关注怎么做，类似于问答题
没理解对的地方，还望纠正，指教。
每天记录一节、促进自己成长加深印象，内容只限于初学者。
ღ( ´･ᴗ･` )比心
