1.React简介与特性

特点

• 声明式
• 组件化
• 跨平台编写

Thinking In React

react是用JavaScript构建快速响应的大型Web应用程序的首选方式之一。 React 作为一个 JavaScript 库，和其他的 JavaScript 库相比，有如下所示特点：

• 声明式设计：React 采用声明范式，可以轻松描述应用。以声明式编写 UI，可以让代码更加可靠，且方便调试。
• 组件化：为程序编写独立的模块化 UI 组件，并且它们可以引入其他组件，这等同于提高了代码的可维护性。
• 高效：React 通过对 DOM 的模拟，最大限度地减少与 DOM 的交互。
• 灵活：React 可以与已知的库或框架很好地配合。
• JSX ：JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
• 单向响应的数据流： React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
• 跨浏览器兼容：虚拟 DOM 帮助我们解决了跨浏览器问题，它为我们提供了标准化的 API，甚至在 IE8中都没有问题。

优缺点

• 优点

1. 快速响应：Fiber
2. 组件化：复用性强
3. 声明式编程
4. 跨平台：只需修改渲染器

• 缺点

1. 大型应用需要配套学习状态管理、路由工具
2. 不适合小型应用，需要用babel处理

2.常用API

• Provider组件：提供共享的store，HOC（高阶组件），Provider 返回一个HOC（高阶组件）的函数：conncet。
• connect方法：从store中获取数据和方法，注入组件，返回包含数据和方法的高阶组件。接受两个参数：mapStateToProps和mapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。 mapDispatchToProps() connect函数的第二个参数，用来建立 UI 组件的参数到store.dispatch方法的映射。它定义了哪些用户的操作应该当作 Action，传给 Store。它可以是一个函数，也可以是一个对象。
• useSelector方法：与connect获取数据的作用一样，即获取组件所需的store中的数据 useDispatch方法：与connect获取数据更新方法的作用一样，即获取dispatch方法，用于发送action来更新store中的数据。
• applyMiddleware applyMiddleware(…middlewares) 引入中间件，比如我们经常使用的用于处理异步action的redux-thunk 中间件。实际上，中间件是一个函数，对store.dispatch函数进行了改造，在发出action和执行reducer之间，增加了一些其他的功能。
• compose compose是一个返回依次执行参数里面的方法的函数， 其内部是通过Array.prototype.reduceRight 函数实现的，一般redux项目使用多个中间件时会用到。
• mapStateToProps() mapStateToProps是一个函数，它接受state作为参数，返回一个对象。这个对象有一个todos属性，代表 UI 组件的同名参数，后面的getVisibleTodos也是一个函数，可以从state算出 todos 的值。