React简介
• facebook开源的前端JS结构化框架
• 一个用于动静构建用户界面的JS框架
React特点
• 申明式编码Declarative
• 组件化编码Component_Based
• 双端（客户端、服务器）渲染 Learn Once,Write Anywhere
• 操作虚构DOM对象
• DOM diff（difference）算法
• 单向数据流
• 高效
• 虚构(virtual)DOM,不总是间接操作DOM(批量更新，缩小更新次数)
• 高效的DOM Diff算法，最小化页面重绘（减小页面更新区域）
• 导入相干js库文件（react.js,react-dom.js,babel.min.js）
• 编码：
• <div id="container"></div>
<script type="text/babel">
var aa = 123
ReactDOM.render(<h1>{aa}</h1>, containerDOM);
</script>
React核心内容
• 虚构DOM对象
• jsx语法：次要用来创立虚构DOM对象
• 组件
• 组件申明周期
• 组件实例对象的三大属性：props, refs, state
React JSX
• react定义的一种相似于XML的JS拓展语法：XML+JS
• 作用：用来创立react虚构DOM对象
• js中间接能够套标签，但标签要套js须要放在{}中
• 在解析显示js数组时，会主动遍历显示
• 把数据的数据转换成标签数组：
• var liArr = dataArr.map(function(item,index){
return <li key={index}>{item}></li>
})
• 留神：
• 便签必须要又结束符
• 标签的class属性必须为className属性
• 便签的style属性值必须为：{{clolor:'red',width:12}}
虚构DOM
• 虚构DOM的定义：
• 虚构DOM(元素)是一个个别的js对象，精确的说是一个倒立的对象树
• 虚构DOM保留了实在DOM的档次关系和根本属性，与实在DOM一一对应
• 如果只是更新虚构DOM,页面不会重绘，大大提高了绘制效率。
• Vitual DOM 算法的根本步骤
• 用JavaScript对象构造示意DOM树的构造，而后用这个树结构建设真正的DOM树，插到文档当中。
• 当状态变更的时候，从新构建一棵新的对象树。而后新的树和旧的树进行比拟，记录差别。
• 把 步骤2 中记录的差别利用到 步骤1 所构建的真正的DOM树上，更新前端培训视图。
• 深刻了解
• Virtual DOM 实质上就是在JS 和 DOM 之间做了一个缓存。与CPU与硬盘的缓存原理相似。
Component
React是组件化编码开发
Component根本了解和应用：
• 自定义标签：组件类（函数）/标签
• 创立组件类
• //形式-：无状态函数（最简洁，举荐应用）function MyComponent1(){
return <h1>自定义组件</h1>；
}//形式二：ES6类语法（简单组件，举荐应用）class MyComponent2 extends React.Component{
render(){
return <h1>自定义组件</h1>；
}
}//形式三：ES5老语法（不举荐）var MyComponent3 = React.createClass({
render(){
return <h1>自定义组件</h1>；
}
})
• 渲染组件标签ReactDOM.render(<MyComponent/>,cotainerEle);
ReactDOM.render()渲染组件标签的根本流程
• React外部保护了一个组件实例对象/调用组件函数，失去虚构DOM对象
• 将虚构DOM解析为实在DOM
• 插入到指定的页面元素外部
props
• 所有组件标签属性的汇合对象
• 给标签指定属性，保留内部数据（可能是一个function）
• 在组件外部读取属性：this.props.propertyName
• 作用：从指标组件内部向组件外部传递数据
• 对props中的属性值进行类型限度和必要性限度
• Person.propTypes = {
name : React.ProTypes.string.isRequired,
age : React.ProTypes.number.isRequired
}
• 拓展属性：将对象的所有属性通过props传递<Person {...person}/>
• 组件的组合
• 组件标签中蕴含子组件标签
• 拆分组件：拆分界面，抽取组件
• 通过props传递数据
refs
• 组件内蕴含ref属性的标签元素的汇合对象
• 给操作指标标签指定ref属性，打一个标识
• 在组件外部取得标签对象：this.refs.refName(只是失去了标签元素对象)
<input ref = 'username'/>
this.refs.username //返回input对象• 作用：操作组件外部的实在便签dom元素对象
state
• 组件被称为“状态机”，页面的显示是更具组件的state属性的数据来显示
• 初始化指定：
constrctor(){
super();
this.state = {
stateName1 : stateValue1;stateName2 : stateValue2;};
}• 读取显示 this.state.stateName1;
• 更新状态-->更新界面：this.setState({stateName1 : stateValue1});
事件处理
• 给便签增加属性：onXxx = {this.eventHandler}
• 在组件中增加事件处理办法
eventHandler(event){}• 使自定义办法中的this为组件对象• 在constructor中bind(this)
• constructor(props){
super();
this.state = {
isLike : false
};
this.changeLink = this.changeLink.bind(this);
}
changeLink(){
this.setState({
isLink :!this.state.isLike;
})
}
• 应用箭头函数定义方法（ES6模块化编码是能力应用）
• class BrokenButton extends React.Component {
render() {
return (
<button onClick={this.handleClick} style={this.state}>
Set background to red
</button>
);
}
handleClick() {
this.setState({ backgroundColor: "red" });
}
}
render(<BrokenButton />, document.getElementById("root"));
实现一个双向绑定的组件
• React是当想数据流
• 须要通过onChange监听伎俩实现，或应用订阅形式PusSubJS https://github.com/mroderick/...（相似与Android的EventBus)
组件生命周期
---初始化阶段---
1.设置组件的默认属性
static defaultProps = {
name: 'Kobe',age:40};
//or
Counter.defaltProps={name:'Kobe'}2.设置组件的初始化状态
constructor() {
super();this.state = {number: 0}}3.componentWillMount():组件行将被渲染到页面之前触发，此时能够进行开启定时器、向服务器发送申请等操作
4.render()：组件渲染
5.componentDidMount():组件曾经被渲染到页面中后触发：此时页面中有了真正的DOM元素，能够进行DOM相干操作。
---运行中阶段---
6.compomentWillReceiveProps()：组件接管到属性时触发。
7.shouldComponentUpdate()：当组件接管到新属性，或组件的状态产生扭转时触发。组件首次渲染时并不会触发。
shouldComponentUpdate(newProps, newState) {
if (newProps.number < 5) return true;return false}
//该钩子函数能够接管到两个参数，新的属性和状态，返回true/false来管制组件是否须要更新。
- 个别咱们通过该函数来优化性能：
一个React我的项目须要更新一个小组件时，很可能须要父组件更新本人的状态。而一个父组件的从新更新会造成它旗下所有的子组件从新执行render()办法，造成新的虚构DOM，再用diff算法对新旧虚构DOM进行构造和属性的比拟，决定组件是否须要从新渲染
无疑这样的操作会造成很多的性能节约，所以咱们开发者能够依据我的项目的业务逻辑，在shouldComponentUpdate()中退出条件判断，从而优化性能
例如React中的就提供了一个PureComponent的类，当咱们的组件继承于它时，组件更新时就会默认先比拟新旧属性和状态，从而决定组件是否更新。值得注意的是，PureComponent进行的是浅比拟，所以组件状态或属性扭转时，都须要返回一个新的对象或数组
- componentWillUpdate()：组件行将被更新时触发。
- componentDidUpdate()：组件被更新实现后触发。页面中产生了新的DOM元素，能够进行DOM操作。
---销毁阶段---
- componentWillUnmount()：组件被销毁时触发，这里咱们能够进行一些清理资源操作，例如定时器，勾销订阅事件等等。
React-router
• Router: 路由器；
• Route: 注册路由；
• hashHistory：收集、治理路由历史记录；
• IndexRoute: 默认子路由组件
• Link: 生成a标签；
• hash url:通过在url前增加 # 映射成为 hash url, # 前面的url又叫片段标识符；
• 更改hash url浏览器不会更新，但会增加一条浏览历史记录。
React ajax
React没有ajax模块，集成其它的js库(如axios/fetch/jQuery/), 发送ajax申请
• axios 封装XmlHttpRequest对象的ajax promise 能够用在浏览器端和服务器
• fetch 不再应用XmlHttpRequest对象提交ajax申请 fetch就是用来提交ajax申请的函数, 只是新的浏览才内置了fetch 为了兼容低版本的浏览器, 能够引入fetch.js 在哪个办法去发送ajax申请只显示一次(申请一次): componentDidMount()，显示屡次(申请屡次): componentWillReceiveProps()
作者：zEcong