一、react是什么？
react是一个js框架，可以用它来编写html页面，使用react后我们可以完全抛弃html（只需要一个主index文件），而用纯js来编写页面；
二、为什么要使用react
和直接用html编写页面相比，使用react有以下几点好处：
1. 便于代码的复用
用html编写页面时，如果多个页面拥有基本相同的模块，那么需要把相关模块在各个html文件中全部复制一遍。而使用react我们只需要把这些模块写成组件，在各个页面中调用这个组件即可；
2. 提高渲染效率
当信息发生改变时，需要重新渲染页面，如果用html编写，我们需要花很多精力考虑架构问题，保证渲染效率；而react把这些问题封装了起来，编写高性能页面会变得特别容易；
3. 容易管理
当网站页面变得复杂时，页面管理将变得非常重要，我们需要花很多精力在页面架构和代码维护上，而react 让这一切变得简单；
三、react不能帮我们做什么
react的目的是让我们更好的管理和复用代码，若自己要编写react组件，那么基本的html标签的应用，css语法都是必须要掌握的；使用react后我们依然需要做以下两点：
1. 亲自编写所有要渲染的页面，虽然不用使用html，但需要用类似的 JSX语法。react只是帮我们提高了复用性；
2. 亲自写所有的css代码，页面呈现效果依然需要自己分析编写；
当然借助很多开源的react组件，可以取代一部分这些工作，不过做出的网站大都比较雷同，缺乏个性；
四、深入理解react究竟做了什么
对前端稍微有点基础的都知道，前端学习有3大块html+css+js，其中我们看到的所有web页面的显示效果只有两个因素决定 ，即html和css；只要页面发生了改变，无论是呈现的数据变了，图表变了，图片变了还是某 个颜色变了，无论这种改变是如何导致的，比如鼠标点击，声音控制或者后台数据改变。那么必然意味着 html或者css发生了改变；简而言之，页面的呈现和html+css有着一一对应的关系；而前端的主要工作，除了 编写各种页面之外，就是使用js语言根据数据来不断地更新html和css，从而使页面发生变化；
1. 原生开发如何更新页面
当js以浏览器作为宿主环境时，浏览器为js提供了DOM作为js操作文档的唯一接口，当不使用任何框架时，要更新页面，我们必须亲自调用DOM提供的API来更改文档，效率极其低下；
2. react如何更新页面
在react中每个组件都有一个state对象，它存储了当前组件需要的所有可能发生变化的数据，渲染的html页面和state中的数据是一种一一对应的关系。只要我们通过setState方法改变了state中的数据，那么html也 就跟着变化了，无需我们亲自动手修改dom；在使用react时，只要我们根据state构建了组件，接下来只需要 考虑如何更新state即可。react为更新dom提供了非常高效的算法，这里不深入展开去讲了；
五、react的基本用法
react组件的编写需要两类信息，变化的和不变的。在组件编写时要花精力去分析哪些属性在组件的生命周期 中是有可能发生变化的，哪些是不变的。不变的部分我们就可以写死在html中，针对变化的部分其信息来源 有两种 ，即组件的状态和父组件的状态；
1. 组件的状态
在编写组件时，要为组件编写一个state属性，存储了当前组件需要的数据；当需要改变状态时，调用当前组件的this.setState（）方法即可，浏览器会自动重新渲染当前组件，下面是官方demo的一个例子：
class Square extends React.Component { constructor() { super(); this.state = { value: null, }; } render() { return ( <button className="square" onClick={() => this.setState({value: 'X'})}> {this.state.value} </button> ); } }
2. 父组件的状态
当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中 的状态数据就能够更方便地交流共享了。（官方文档），官方示例如下：
1 //父组件 2 renderSquare(i) { 3 return ( 4 <Square 5 value={this.state.squares[i]} 6 onClick={() => this.handleClick(i)} 7 /> 8 ); 9 } 10 11 //子组件 12 class Square extends React.Component { 13 render() { 14 return ( 15 <button className="square" onClick={() =>this.props.onClick()}> 16 {this.props.value} 17 </button> 18 ); 19 } 20 }
小结：
state——组件的状态属性
setState——重新设置组件的状态（这里注意，需要设置一个新的对象而不是在原有组件对象上做修改，至于原因，官方文档上说的很清楚）
props——子组件通过这个属性获得父组件的信息
六、redux
1. 为什么要使用redux
redux是一个用来管理前端数据的一个架构，只有在应用程序非常复杂，数据来源复杂，交互频繁的情况下， 应用redux才有明显的好处；比如，某个应用有上百个组件，并且组件之间信息交互频繁，如果不使用redux ，那么数据将会分散在上百个组件当中，并且当多个组件需要同一个数据时，同样的数据在每个组件中将有 一个副本，当数据改变时，维护起来会相当麻烦。这种情况下就需要考虑引入redux；
2. redux设计的三大原则
（1） 单一数据源
使用redux的程序，所有的state都存储在一个单一的数据源store内部，类似一个巨大的对象树。
（2）state是只读的
state是只读的，能改变state的唯一方式是通过触发action来修改
（3）使用纯函数执行修改
为了描述 action 如何改变 state tree ， 你需要编写 reducers。reducers是一些纯函数，接口是当前state和action。只需要根据action，返回对应的state。而且必须要有返回。
3. 主要API
store=createStare（reducer）——创建store
state=store.getState（）
store.dispatch（action）——触发action，这是改变state的唯一接口
store.subscribe（listener）——一旦State发生变化，就自动执行这个函数，只要把 View 的更新函数（对于 React 项目，就是组件的render方法或setState方法）放入listen，就会实现 View 的自动渲染。
4. reducer的拆分
Redux 提供了一个combineReducers方法，用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，然后用这个方法，就可以将它们合成一个大的 Reducer。
七、react-redux
为了方便使用，Redux 的作者封装了一个 React 专用的库 React-Redux；React-Redux 将所有组件分成两大 类：UI 组件（presentational component）和容器组件（container component），其中UI组件，是“纯组件”，只负责呈现，所有数据通过props获取；容器组件负责数据和逻辑。可以使用装饰器模式把纯组件转化 为容器组价，这里主要用到了三个函数：
1. mapStateToProps（state,ownprops）
建立一个从（外部的）state对象到（UI 组件的）props对象的映射关系。
2. mapStateToProps（dispatch，ownProps）
用来建立store.dispatch方法到props对象的映射。
3.connect
React-Redux 提供connect方法，用于从 UI 组件生成容器组件。它需要mapStateToProps和mapStateToProps作为参数。例如：
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)（TodoList）
<Provider> 组件
当组件嵌套比较深的时候，内层组件要获得state会非常麻烦，需要借助props属性一层一层传递。Proveder组件解决了这个问题，把Provider组件放在最外层，只要在Proveder上传入store，这样所有子组件都可以拿到state了
1 render（ 2 <Provider store={store}> 3 <App /> 4 </Provider>, 5 document.getElementById('root') 6 ）
八、react-router
一个应用程序往往不只一个页面，在多页面应用程序中我们需要在各个页面之间切换，react-route架构提供了在多个页面和组件之间进行切换的机制；react-router常用组件如下：
<BrowserRouter>
<Link>
为你的应用提供声明式的、可访问的导航链接。
--属性 to
<Route>
最基本的职责是在其 path 属性与某个 location 匹配时呈现一些 UI。
--属性 path
--属性 component
--exact完全匹配
<Switch>
只渲染命中的第一个路由
<Redirect>
直接渲染路由
--属性 to