1. React入门

## 1.1. React基本认识
## 1.2. React基本使用
## 1.3. JSX的理解和使用
## 1.4. 模块与模块化, 组件与组件化的理解

2. React组件化编程

## 2.1. 组件的定义与使用
## 2.2. 组件的3大属性: state, props, refs
## 2.3. 组件中的事件处理
## 2.4. 组件的组合使用
## 2.5. 组件收集表单数据
## 2.6. 组件的生命周期
## 2.7. 虚拟DOM与DOM diff算法
## 2.8. 命令式编程与声明式编程

1. React入门

1.1. React的基本认识

1). Facebook开源的一个js库
2). 一个用来动态构建用户界面的js库
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">var aa = 123var bb = 'test'ReactDOM.render(<h1 id={bb}>{aa}</h1>, containerDOM)</script>

1.3. JSX的理解和使用

1). 理解* 全称: JavaScript XML* react定义的一种类似于XML的JS扩展语法: XML+JS* 作用: 用来创建react虚拟DOM(元素)对象
2). 编码相关* js中直接可以套标签, 但标签要套js需要放在{}中* 在解析显示js数组时, 会自动遍历显示* 把数据的数组转换为标签的数组: var liArr = dataArr.map(function(item, index){return <li key={index}>{item}</li>})
3). 注意:* 标签必须有结束* 标签的class属性必须改为className属性* 标签的style属性值必须为: {{color:'red', width:12}}

1.4. 几个重要概念理解

1). 模块与组件

1. 模块:理解: 向外提供特定功能的js程序, 一般就是一个js文件为什么: js代码更多更复杂作用: 复用js, 简化js的编写, 提高js运行效率
2. 组件: 理解: 用来实现特定功能效果的代码集合(html/css/js)为什么: 一个界面的功能太复杂了作用: 复用编码, 简化项目界面编码, 提高运行效率

2). 模块化与组件化

1. 模块化:当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
2. 组件化:当应用是以多组件的方式实现功能, 这上应用就是一个组件化的应用

2. react组件化开发

2.1. 基本理解和使用

1). 自定义的标签: 组件类(函数)/标签
2). 创建组件类//方式1: 无状态函数(简单组件, 推荐使用)function MyComponent1(props) {return <h1>自定义组件标题11111</h1>}//方式2: ES6类语法(复杂组件, 推荐使用)class MyComponent3 extends React.Component {render () {return <h1>自定义组件标题33333</h1>}}
3). 渲染组件标签ReactDOM.render(<MyComp />,  cotainerEle)
4). ReactDOM.render()渲染组件标签的基本流程React内部会创建组件实例对象/调用组件函数, 得到虚拟DOM对象将虚拟DOM并解析为真实DOM插入到指定的页面元素内部

2.2. 组件的3大属性: state

1. 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示
2. 初始化指定:constructor() {super()this.state = {stateName1 : stateValue1,stateName2 : stateValue2}}
3. 读取显示: this.state.stateName1
4. 更新状态-->更新界面 : this.setState({stateName1 : newValue})

2.2. 组件的3大属性: props

所有组件标签的属性的集合对象
给标签指定属性, 保存外部数据(可能是一个function)
在组件内部读取属性: this.props.propertyName
作用: 从目标组件外部向组件内部传递数据
对props中的属性值进行类型限制和必要性限制Person.propTypes = {name: React.PropTypes.string.isRequired,age: React.PropTypes.number.isRequired}
扩展属性: 将对象的所有属性通过props传递<Person {...person}/>

2.2. 组件的3大属性: refs

组件内包含ref属性的标签元素的集合对象
给操作目标标签指定ref属性, 打一个标识
在组件内部获得标签对象: this.refs.refName(只是得到了标签元素对象)
作用: 找到组件内部的真实dom元素对象, 进而操作它

2.3. 组件中的事件处理

1. 给标签添加属性: onXxx={this.eventHandler}
2. 在组件中添加事件处理方法eventHandler(event) {}
3. 使自定义方法中的this为组件对象在constructor()中bind(this)使用箭头函数定义方法(ES6模块化编码时才能使用)
4. 事件监听绑定事件监听事件名回调函数触发事件用户对对应的界面做对应的操作编码

2.4. 组件的组合使用

1)拆分组件: 拆分界面,抽取组件
2)实现静态组件: 使用组件实现静态页面效果
3)实现动态组件①　动态显示初始化数据②　交互功能(从绑定事件监听开始)

2.5. 组件收集表单数据

受控组件
非受控组件

2.6. 组件的生命周期

1. 组件的三个生命周期状态:Mount：插入真实 DOMUpdate：被重新渲染Unmount：被移出真实 DOM
2. 生命周期流程:* 第一次初始化显示: ReactDOM.render(<Xxx/>, containDom)constructor()componentWillMount() : 将要插入回调render() : 用于插入虚拟DOM回调componentDidMount() : 已经插入回调* 每次更新state: this.setState({})componentWillReceiveProps(): 接收父组件新的属性componentWillUpdate() : 将要更新回调render() : 更新(重新渲染)componentDidUpdate() : 已经更新回调* 删除组件: ReactDOM.unmountComponentAtNode(div): 移除组件componentWillUnmount() : 组件将要被移除回调
3. 常用的方法render(): 必须重写, 返回一个自定义的虚拟DOMconstructor(): 初始化状态, 绑定this(可以箭头函数代替)componentDidMount() : 只执行一次, 已经在dom树中, 适合启动/设置一些监听

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vKuP6cbK-1575907485934)(http://i.imgur.com/h5khD9F.png)]

2.7. 虚拟DOM与DOM diff算法

1). 虚拟DOM是什么?

一个虚拟DOM(元素)是一个一般的js对象, 准确的说是一个对象树(倒立的)
虚拟DOM保存了真实DOM的层次关系和一些基本属性，与真实DOM一一对应
如果只是更新虚拟DOM, 页面是不会重绘的

2). Virtual DOM 算法的基本步骤

用JS对象树表示DOM树的结构；然后用这个树构建一个真正的DOM树插到文档当中
当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
把差异应用到真实DOM树上，视图就更新了

3). 进一步理解

Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。
可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。CPU（JS）只操作内存（Virtual DOM），最后的时候再把变更写入硬盘（DOM）。

2.8. 命令式编程与声明式编程

声明式编程只关注做什么, 而不关注怎么做(流程),  类似于填空题
命令式编程要关注做什么和怎么做(流程), 类似于问答题var arr = [1, 3, 5, 7]
// 需求: 得到一个新的数组, 数组中每个元素都比arr中对应的元素大10: [11, 13, 15, 17]
// 命令式编程
var arr2 = []
for(var i =0;i<arr.length;i++) {arr2.push(arr[i]+10)
}
console.log(arr2)
// 声明式编程
var arr3 = arr.map(function(item){return item +10
})
// 声明式编程是建立命令式编程的基础上// 数组中常见声明式方法map() / forEach() / find() / findIndex()

/**************************************************************************************/
react-router:

1. 理解react-router

react的一个插件库
专门用来实现一个SPA应用
基于react的项目基本都会用到此库

2. 几个重要问题

1). SPA应用

单页Web应用（single page web application，SPA）
整个应用只有一个完整的页面
点击页面中的链接不会刷新页面, 本身也不会向服务器发请求
当点击链接时, 只会做页面的局部更新
数据都需要通过ajax请求获取, 并在前端异步展现

2). 路由

1. 什么是路由?一个路由就是一个映射关系(key:value)key为路由路径, value可能是function/component
2. 路由分类后台路由: node服务器端路由, value是function, 用来处理客户端提交的请求并返回一个响应数据前台路由: 浏览器端路由, value是component, 当请求的是路由path时, 浏览器端前没有发送http请求, 但界面会更新显示对应的组件 
3. 后台路由* 注册路由: router.get(path, function(req, res))* 当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
* 前端路由* 注册路由: <Route path="/about" component={About}>* 当浏览器的hash变为#about时, 当前路由组件就会变为About组件

3). 关于url中的#

1. 理解#'#'代表网页中的一个位置。其右面的字符，就是该位置的标识符改变#不触发网页重载改变#会改变浏览器的访问历史
2. 操作#window.location.hash读取#值window.onhashchange = func 监听hash改变
3. 学习资源: 阮一峰教程: http://www.ruanyifeng.com/blog/2011/03/url_hash.html

3. react-router的学习资源

github主页: https://github.com/ReactTraining/react-router
官网教程: https://github.com/reactjs/react-router-tutorial
阮一峰教程: http://www.ruanyifeng.com/blog/2016/05/react_router.html

4. 相关API

1). react-router中的相关组件:

Router: 路由器组件, 用来包含各个路由组件
Route: 路由组件, 注册路由 
IndexRoute: 默认子路由组件
hashHistory: 路由的切换由URL的hash变化决定，即URL的#部分发生变化
Link: 路由链接组件

2). Router: 路由器组件

属性:  history={hashHistory} 用来监听浏览器地址栏的变化, 并将URL解析成一个地址对象，供React Router匹配
子组件: Route

3). Route: 路由组件

属性1: path="/xxx"  
属性2: component={Xxx}
根路由组件: path="/"的组件, 一般为App
子路由组件: 子<Route>配置的组件

4). IndexRoute: 默认路由

当父路由被请求时, 默认就会请求此路由组件

5). hashHistory

用于Router组件的history属性
作用: 为地址url生成?_k=hash, 用于内部保存对应的state

6). Link: 路由链接

属性1: to="/xxx"
属性2: activeClassName="active"

5. react-router的基本使用

1). 下载

npm install react-router --save

2). 定义各个路由组件

1. About.jsimport React from 'react'function About() {return <div>About组件内容</div>}export default About
2. Home.jsimport React from 'react'function Home() {return <div>Home组件内容2</div>}export default Home
3. Repos.jsimport React, {Component} from 'react'export default class Repos extends Component {render() {return (<div>Repos组件</div>)}}
4. App.js
import React, {Component} from 'react'
import {Link} from 'react-router'export default class App extends Component {render() {return (<div><h2>Hello, React Router!</h2><ul><li><Link to="/about" activeClassName="active">About2</Link></li><li><Link to="/repos" activeClassName="active">Repos2</Link></li></ul>{this.props.children}</div>)}
}

3). index.js: 注册路由, 渲染路由器标签

import React from 'react'
import {render} from 'react-dom'
import {Router, Route, IndexRoute, hashHistory} from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'
import Home from './modules/Home'render((<Router history={hashHistory}><Route path="/" component={App}><IndexRoute component={Home}/><Route path="/about" component={About}></Route><Route path="/repos" component={Repos}></Route></Route></Router>
), document.getElementById('app'))

3). 主页面: index.html

<style>.active {color: red;}
</style>

6. 向路由组件传递请求参数

1). repo.js: repos组件下的分路由组件

import React from 'react'
export default function ({params}) {let {username, repoName} = paramsreturn (<div>用户名:{username}, 仓库名:{repoName}</div>)
}

2). repos.js

import React from 'react'
import NavLink from './NavLink'export default class Repos extends React.Component {constructor(props) {super(props);this.state = {repos: [{username: 'faceback', repoName: 'react'},{username: 'faceback', repoName: 'react-router'},{username: 'Angular', repoName: 'angular'},{username: 'Angular', repoName: 'angular-cli'}]};this.handleSubmit = this.handleSubmit.bind(this)}handleSubmit () {const repos = this.state.reposrepos.push({username: this.refs.username.value,repoName: this.refs.repoName.value})this.setState({repos})this.refs.username.value = ''this.refs.repoName.value = ''}render() {return (<div><h2>Repos</h2><ul>{this.state.repos.map((repo, index) => {const to = `/repos/${repo.username}/${repo.repoName}`return (<li key={index}><Link to={to} activeClassName='active'>{repo.repoName}</Link></li>)})}<li><form onSubmit={this.handleSubmit}><input type="text" placeholder="用户名" ref='username'/> / {' '}<input type="text" placeholder="仓库名" ref='repoName'/>{' '}<button type="submit">添加</button></form></li></ul>{this.props.children}</div>);}
}

3). index.js: 配置路由

<Route path="/repos" component={Repos}><Route path="/repos/:username/:repoName" component={Repo}/>
</Route>

7. 优化Link组件

1). NavLink.js

import React from 'react'
import {Link} from 'react-router'
export default function NavLink(props) {return <Link {...props} activeClassName="active"/>
}

2). Repos.js

<NavLink to={to}>{repo.repoName}</NavLink>