React 技术栈

从接触 React 到多个项目中运用 React，已经有1年多时间了，经常在面试中被问起，而我的回答中总是有很多待提高的空间，写下这篇，希望能帮自己整理下思路~

• Webpack 自动化构建工具
• Redux 数据流
• React 组件
• React 生命周期
• 实用依赖包介绍。immutable 、reselect

Webpack

一个前端自动化的构建工具，可以打包，预处理各种文件，并将各种模块生成一张依赖关系图谱，在浏览器中被若干个入口文件载入。

• webpack 是一个现代 Javascript 应用程序的模块打包器(module bundler)
• 当webpack 处理应用程序时，会递归地构建一个依赖关系图(dependency graph),包含应用所需要的每一个模块
• 将所有模块打包成少量的 bundle, 由浏览器加载

高度可配置，包含四个核心：入口entry, 出口output, 加载器loader, 插件plugins

• loader: 在文件被添加到依赖图中时，将其转换
• plugins: 在webpack编译中被调用，存在于整个生命周期中

Redux

• javaScript 上一个可以预测的状态容器，单向数据流，函数式特性，更优雅
• 整个应用只有一个唯一的可信数据来源，一个Store
• State 只能通过触发 Action 来更改
• State 必须次而成纯函数，每次更改返回一个新的State

pure function: 没有任何副作用，对于同样的参数，无论何时调用都返回相同的结果
Store 与 state: Store 拥有一些方法来管理状态，state 用简单的数据结构表示状态

Actions

一个包含{type, payload} 的对象

Reducer

用来处理Action触发的状态树的更改，用对象扩展的写法可以在不改变旧的state下,返回一个新的state

Store

• 连接 Action 和 Reducer
• 管理整个State 状态树
• 提供getState,dispatch, subscribe方法

store.dispatch(action) => reducer(state,action) => store.getState()
store 会保存root reducer 中返回的状态树，用新的替代旧的

React-redux

Provider: 作为一个容器组件，用来接收 Store, 并且让Store对子组件可用

render(
  
      // 子组件可以通过 connect 方法关联 store
  
)

Connect

connect([mapStateToProps], [mapDispatchToProps],[mergeProps], [options]) 参数均可选

• mapStateToProps: (state, [ownProps]), 指定了第一个参数就会开启组件监听，返回的props会合并到组件的props中
• mapDispatchToProps: (dispatch, [ownProps]), 在函数里直接dispatch action creator ，返回对象将会合并到props中

React 组件

容器组件

常规组件

表单常用状态属性：value, checked, selected, 均支持 onChange 事件
设置了上述状态属性就是受控组件

依赖包

Reselect

创建一个可记忆的选择器，避免不必要的重复计算

immutable

• 一旦创建就不能被更改的数据，采用旧数据创建新数据时，保证旧数据同时可用且不变。
• 使用结构共享数据，如果对象中一个节点发生改变，只修改这个节点和受它影响的父节点，避免了深拷贝，提高性能

Redux Middleware

提供位于 action 被发起之后，到达 reducer 之前的扩展点。通常用来进行日志记录，创建崩溃报告，处理路由等