一, 关于 React 的运行原理
1),View
首先我们来看 View , 在前端开发中, 我们称这个为视图层, 就是展示给最终用户的效果, 在本篇教程的学习中, 我们的 View 就是 React.
2),Store
随着前端应用要完成的工作越来越丰富, 我们对前端也提出了要保持 "状态" 的要求. 在 React 中, 这个 "状态" 将保存在 this.state. 在 Redux 中, 这个状态将保存在 Store.
这个 Store 从抽象意义上来说可以看做一个前端的 "数据库", 它保存着前端的状态(state), 并且分发这些状态给 View, 使得 View 根据这些状态渲染不同的内容.
注意到, Redux 是一个可预测的 JavaScript 应用状态管理容器, 这个状态容器就是这里的 Store.
3),Reducers
我们日常生活中看到的网页, 它不是一成不变的, 而是会响应用户的 "动作", 无论是页面跳转还是登陆注册, 这些动作会改变当前应用的状态.
在 Redux 框架中, Reducers 的作用就是响应不同的动作. 更精确地说, Reducers 是负责更新 Store 中状态的 JavaScript 函数.
当我们粗略的认知上面的这三个核心之后, 我们接下来可以用 redux 去写一些小的程序了:
如果我们希望展示一个 todo 列表, 当一个 todo 被点击时, 它将被加上删除线表示此 todo 已经完成, 我们还加上了一个输入框, 使得用户可以增加新的 todo. 在底部, 我们展示了三个按钮, 可以切换展示 todo 的类型.
整份 React 代码组件设计如下(首先是组件, 然后是组件所拥有的属性):
TodoList 用来展示 todo 列表:
todos: Array 是一个 todo 数组, 它其中的每个元素的样子类似
- {
- id, text, completed
- }
- .
- toggleTodo(id: number)
是当一个 todo 被点击时会调用的回调函数.
Todo 是单一 todo 组件:
text: string 是这个 todo 将显示的内容.
completed: boolean 用来表示是否完成, 如果完成, 那么样式上就会给这个元素划上删除线.
onClick() 是当这个 todo 被点击时将调用的回调函数.
Link 是一个展示过滤的按钮:
active: boolean 代表此时被选中, 那么此按钮将不能被点击
onClick() 表示这个 link 被点击时将调用的回调函数.
children: ReactComponent
展示子组件
Footer 用于展示三个过滤按钮:
filter: string 代表此时的被选中的过滤器字符串, 它是
[SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE]
其中之一.
setVisibilityFilter()
代表 Link 被点击时将设置对应被点击的 filter 的回调函数.
App 是 React 根组件, 最终组合其他组件并使用 ReactDOM 对其进行编译渲染, 我们在它的 state 上定义了上面的几个组件会用到的属性, 同时定义了其他组件会用到的方法, 还有 nextTodoId,VisibilityFilters,getVisibleTodos 等一些辅助函数.
二, 理解 Store: 数据的唯一真相来源
我们前面提到了 Store 在 Redux 中的作用是用来保存状态的, 相当于我们在前端建立了一个简单的 "数据库". 在目前的富状态前端应用中, 如果每一次状态的修改 (例如点击一个按钮) 都需要与后端通信, 那么整个网站的平均响应时间将变得难以接受, 用户体验将糟糕透顶.
根据不完全统计:"一个网站能留住一名用户的时间只有 8S, 如果你在 8S 内不能吸引住用户, 或者网站出现了问题, 那么你将彻底地丢失这名用户!"
所以为了适应用户的访问需求, 聪明的前端拓荒者们开始将后端的 "数据库" 理念引入到前端中, 这样大多数的前端状态可以直接在前端搞定, 完全不需要后端的介入.
三, React 状态 "危机"
在 React 中, 我们将状态存在每个组件的 this.state 中, 每个组件的 state 为组件所私有, 如果要在一个组件中操作另外一个组件, 实现起来是相当繁琐的.
四, Store 是解救者
React 诞生的初衷就是为了更好, 更高效率地编写用户界面 , 它不应该也不需要来承担状态管理的职责.
于是备受折磨的前端拓荒者们构想出了伟大的 Store. 我们完全不需要让每个组件单独保持状态, 直接抽离所有组件的状态, 类比 React 组件树, 构造一个中心化的状态树, 这棵状态树与 React 组件树一一对应, 相当于对 React 组件树进行了状态化建模:
可以看到, 我们将组件的 state 去掉, 取而代之的是一棵状态树, 它是一个普通的 JavaScript 对象. 通过对象的嵌套来类比组件的嵌套组合, 这棵由 JavaScript 对象建模的状态树就是 Redux 中的 Store.
当我们将组件的状态抽离出去之后, 我们在使用组件 B 操作组件 C 就变得相当简单且高效.
来源: http://www.bubuko.com/infodetail-3356654.html