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