关注本站公众号,
获取永久访问授权码
扫码关注,回复『刷题』即可.
~技术问答题~
返 回

No.837 对Redux 的理解,主要解决什么问题

题目描述~ 略...

寄语:问题比答案更重要

建议自己先有个思考的过程,有了自己的答案或者疑问再看解析进行对比。

目前解析在逐步添加中,也可以跳转链接查看。

React 是视图层框架。

Redux 是一个用来管理数据状态和UI 状态的 JavaScript 应用工具。

随着JavaScript 单页应用(SPA)开发日趋 复杂, JavaScript 需要管理比任何时候都要多的state(状态), Redux 就是降低管理难度的。

(Redux 支持React、Angular、jQuery 甚至纯JavaScript)。

在React 中,UI 以组件的形式来搭建,组件之间可以嵌套组合。但 React 中组件间通信的数据流是单向的,顶层组件可以通过props 属性向下层组件传递数据,而下层组件不能向上层组件传递数据,兄 弟组件之间同样不能。

这样简单的单向数据流支撑起了React 中的 数据可控性。

当项目越来越大的时候,管理数据的事件或回调函数将越来越多,也 将越来越不好管理。管理不断变化的state 非常困难。

如果一个 model 的变化会引起另一个model 变化,那么当view 变化时,就 可能引起对应model 以及另一个model 的变化,依次地,可能会引 起另一个view 的变化。

直至你搞不清楚到底发生了什么。state 在 什么时候,由于什么原因,如何变化已然不受控制。当系统变得错 综复杂的时候,想重现问题或者添加新功能就会变得举步维艰。如果

这还不够糟糕,考虑一些来自前端开发领域的新需求,如更新调优、 服务端渲染、路由跳转前请求数据等。state 的管理在大项目中相当 复杂。

Redux 提供了一个叫store 的统一仓储库,组件通过dispatch 将 state 直接传入store, 不用通过其他的组件。并且组件通过 subscribe 从store 获取到state 的改变。

使用了Redux,所有的 组件都可以从store 中获取到所需的state,他们也能从store 获 取到state 的改变。

这比组件之间互相传递数据清晰明朗的多。

主要解决的问题: 单纯的Redux 只是一个状态机,是没有UI 呈现的,react- redux 作 用是将Redux 的状态机和React 的UI 呈现绑定在一起,当你dispatch action 改变state 的时候,会自动更新页面。

解析或答案仅供参考。

关于作者

zz_jesse 专注前端

掘金 我的开源项目

公众号@前端技术江湖

一个可以帮开发者成长的公众号前端面试题库更新通知前端学习资料、干货文章

技术交流群

交流中成长大厂内推机会