Redux 由以下组件组成： 1、Action – 这是一个用来描述发生了什么事情的对象。 2、Reducer – 这是一个确定状态将如何变化的地方。 3、Store – 整个程序的状态/对象树保存在Store中。 4、View – 只显示 Store 提供的数据。
中间件提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。 常见的中间件： redux-logger：提供日志输出 redux-thunk：处理异步操作 redux-promise：处理异步操作，actionCreator的返回值是promise
redux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理，主要有三个核心方法，action，store，reducer。
工作流程是 view 调用 store 的 dispatch 接收 action 传入 store，reducer 进行 state 操作，view 通过 store 提供的 getState 获取最新的数据；flux 也是用来进行数据操作的，有四个组成部分 action，dispatch，view，store，工作流程是 view 发出一个 action，派发器接收 action，让 store 进行数据更新，更新完成以后 store 发出 change，view 接受 change 更新视图。Redux 和 Flux 很像。主要区别在于 Flux 有多个可以改变应用状态的 store，在 Flux 中 dispatcher 被用来传递数据到注册的回调事件，但是在 redux 中只能定义一个可更新状态的 store，redux 把 store 和 Dispatcher 合并,结构更加简单清晰新增 state,对状态的管理更加明确，通过 redux，流程更加规范了，减少手动编码量，提高了编码效率，同时缺点时当数据更新时有时候组件不需要，但是也要重新绘制，有些影响效率。一般情况下，我们在构建多交互，多数据流的复杂项目应用时才会使用它们1、单一事实来源： 整个应用的状态存储在单个 store 中的对象/状态树里。单一状态树可以更容易地跟踪随时间的变化，并调试或检查应用程序。 2、状态是只读的： 改变状态的唯一方法是去触发一个动作。动作是描述变化的普通 JS 对象。就像 state 是数据的最小表示一样，该操作是对数据更改的最小表示。 3、使用纯函数进行更改： 为了指定状态树如何通过操作进行转换，你需要纯函数。纯函数是那些返回值仅取决于其参数值的函数。
Redux 使用 “Store” 将程序的整个状态存储在同一个地方。因此所有组件的状态都存储在 Store 中，并且它们从 Store 本身接收更新。单一状态树可以更容易地跟踪随时间的变化，并调试或检查程序。
React 中的 Action 必须具有 type 属性，该属性指示正在执行的 ACTION 的类型。必须将它们定义为字符串常量，并且还可以向其添加更多的属性。在 Redux 中，action 被名为 Action Creators 的函数所创建。以下是 Action 和Action Creator 的示例：
function addTodo(text) { return { type: ADD_TODO, text } }Reducers 是纯函数，它规定应用程序的状态怎样因响应 ACTION 而改变。Reducers 通过接受先前的状态和 action 来工作，然后它返回一个新的状态。它根据操作的类型确定需要执行哪种更新，然后返回新的值。如果不需要完成任务，它会返回原来的状态。
Store 是一个 JavaScript 对象，它可以保存程序的状态，并提供一些方法来访问状态、调度操作和注册侦听器。应用程序的整个状态/对象树保存在单一存储中。因此，Redux 非常简单且是可预测的。我们可以将中间件传递到 store 来处理数据，并记录改变存储状态的各种操作。所有操作都通过 reducer 返回一个新状态。
Redux 的优点如下：
结果的可预测性 - 由于总是存在一个真实来源，即 store ，因此不存在如何将当前状态与动作和应用的其他部分同步的问题。可维护性 - 代码变得更容易维护，具有可预测的结果和严格的结构。服务器端渲染 - 你只需将服务器上创建的 store 传到客户端即可。这对初始渲染非常有用，并且可以优化应用性能，从而提供更好的用户体验。开发人员工具 - 从操作到状态更改，开发人员可以实时跟踪应用中发生的所有事情。社区和生态系统 - Redux 背后有一个巨大的社区，这使得它更加迷人。一个由才华横溢的人组成的大型社区为库的改进做出了贡献，并开发了各种应用。易于测试 - Redux 的代码主要是小巧、纯粹和独立的功能。这使代码可测试且独立。组织 - Redux 准确地说明了代码的组织方式，这使得代码在团队使用时更加一致和简单。1、react严格上针对的是mvc模式的view层，vue则是mvvm模式。 2、操作dom的方式不同，vue使用的是指令操作dom，react是通过js进行操作。 3、数据绑定不同，vue实现的是双向绑定，react的数据流动是单向的。 4、react中state是不能直接改变的，需要使用setState改变。vue中的state不是必须的，数据主要是由data属性在vue对象中管理的。
（1）重写shouldComponentUpdate来避免不必要的dom操作。 （2）使用 production 版本的react.js。 （3）使用key来帮助React识别列表中所有子组件的最小变化。
webpack是一个前端模块化打包工具，主要由入口，出口，loader，plugins四个部分。前端的打包工具还有一个gulp，不过gulp侧重于前端开发的过程，而webpack侧重于模块，例如他会将css文件看作一个模块，通过css-loader将css打包成符合css的静态资源。
因为this.props.children的值有三种可能：
如果当前组件没有子节点，它的值就是undefined
如果当前组件只有一个子节点，它的值就是我object
如果当前组件有多个子节点，它的值就是array
当this.props.children的值不是数组时，使用js的map会报错，React提供了工具方法React.Children来处理this.props.children,它已经将this.props.children的所有情况考虑在内了。 React.Children.map 遍历子元素，执行回调函数，返回结果。
React.Children.forEach 类似于React.Children.map()，但不返回对象。
React.Children.count 返回子元素总数，和传递给 map 或 forEach 的回调函数的调用次数一致。
React.Children.only 返回 children 中仅有的子元素。否则抛出异常。only方法接受的参数只能是一个对象，不能是数组。
React 路由是一个构建在 React 之上的强大的路由库，它有助于向应用程序添加新的屏幕和流。这使 URL 与网页上显示的数据保持同步。它负责维护标准化的结构和行为，并用于开发单页 Web 应用。 React 路由有一个简单的API。
虽然 div用于封装 Router 中的多个路由，当你想要仅显示要在多个定义的路线中呈现的单个路线时，可以使用 “switch” 关键字。使用时，switch标记会按顺序将已定义的 URL 与已定义的路由进行匹配。找到第一个匹配项后，它将渲染指定的路径。从而绕过其它路线。
Router 用于定义多个路由，当用户定义特定的 URL 时，如果此 URL 与 Router 内定义的任何 “路由” 的路径匹配，则用户将重定向到该特定路由。所以基本上我们需要在自己的应用中添加一个 Router 库，允许创建多个路由，每个路由都会向我们提供一个独特的视图
<switch> <route exact path=’/’ component={Home}/> <route path=’/posts/:id’ component={Newpost}/> <route path=’/posts’ component={Post}/> </switch>几个优点是：
就像 React 基于组件一样，在 React Router v4 中，API 是 ‘All About Components’。可以将 Router 可视化为单个根组件（BrowserRouter），其中我们将特定的子路由（route）包起来。无需手动设置历史值：在 React Router v4 中，我们要做的就是将路由包装在 < BrowserRouter> 组件中。包是分开的：共有三个包，分别用于 Web、Native 和 Core。这使我们应用更加紧凑。基于类似的编码风格很容易进行切换。react生命周期分为初始化阶段、运行阶段、销毁阶段。
(1) 初始化阶段： componentWillMount：实例挂载之前 Render：渲染组件 componentDidMount：实例挂载完成。一般在这个函数中与后台进行初始化数据交互。
(2)运行阶段： componentWillReceiveProps：父组件改变时调用。 sholudComponentUpdate：主要是用来手动阻止组件渲染，一般在这个函数中做组件的性能优化。 componentWillUpdate：组件数据更新前调用 componentDidUpdate：组件数据更新完成时调用
(3)销毁阶段： componentUnmount：销毁阶段。一般用来销毁不用的变量或者是解除无用定时器以及解绑无用事件。防止内存泄漏问题。
componentDidMount：在这个阶段，实例和dom已经挂载完成，可以进行相关的dom操作。
componentWillReceiveProps –>shouldComponentUpdate –> componentWillupdate –> componentDidUpdate
因为题太多就分了几篇文章： 第二篇（二）https://blog.csdn.net/g1437353759/article/details/109206187 第三篇（三）https://blog.csdn.net/g1437353759/article/details/109206406
