React与Redux学习总结（一）

最新推荐文章于 2023-04-23 16:41:00 发布

唐小狼

最新推荐文章于 2023-04-23 16:41:00 发布

阅读量688

点赞数

分类专栏：前端工程师学习笔记 React 文章标签： javascript react redux

本文链接：https://blog.csdn.net/tangxiaolang101/article/details/70186166

版权

前端工程师学习笔记同时被 2 个专栏收录

85 篇文章 0 订阅

订阅专栏

React

6 篇文章 0 订阅

订阅专栏

0、React 的事件绑定

React 并未把事件绑定在特定的 DOM 节点上，实际上它是用事件代理的方式在最外层绑定了一个事件回调，当组件 unmounted 的时候，这个事件回调会被自动删除。

（1）组件的生命周期

（2）state 设计原则（最小化设计原则

这几种数据不应该包含到 state 中：

可以由 state 计算得出的数据
组件
props 中的数据

（3）Virtual DOM 用 JavaScript 对象来表述 DOM 元素。

1、对组件的拆分

React-Redux将组件分为 UI 组件（presentational component）和容器组件（container component）。

（1）UI 组件/无状态函数式组件（stateless functional component）

关心应用的外观
可能会包含展示组件或容器组件，除此之外常常还会包含属于组件自身的 DOM 节点与样式信息
常常允许通过 this.props.children 实现嵌套
对应用的其余部分（如 Flux action 及 store）没有依赖
不会指定数据如何加载或改变
只通过 props 获取数据与行为（回调函数）
极少会包含自身的状态（state），如果有，一定是界面状态而非数据
一般都携程函数式组件（functional component），除非需要包含状态、生命周期钩子或性能优化
典型的例子：Page、Sidebar、Story、UserInfo、List

例子：
const Item = ({text}) => (<span>{text}</span>)

（2）容器组件

关心应用如何工作
可能会包含展示组件或容器组件，但通常不会包含 DOM 节点（除包裹用的 div 外），一定不会包含样式信息。
为展示组件或其他容器组件提供数据与行为（回调函数）
调用 Flux action，并将其作为提供给展示组件的回调函数
往往是有状态的，扮演数据源的角色
往往无须手工实现，而是通过高级组件生成，如 react-redux 提供的 connect()、Relay 提供的 createContainer()　及 FluxUtils 提供的 Container.create()等
典型的例子：UserPage、FollowersSidebar、StoryContainer、FollowedUserList

如果一个组件既有 UI 又有业务逻辑，就需要将它拆分为：外面是一个容器组件，里面是一个 UI 组件。前者负责与外部通信，将数据传递给后者，后者负责渲染 view 。
总之，UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。

2、connect() / 高阶组件（higher-order-components/enhancer）

输入逻辑：外部的数据（即 state 对象）如何转换为 UI 组件的参数
输出逻辑：用户发出的动作如何变为 Action 对象，从 UI 组件传出去
接收一个已有的组件作为参数，并返回一个新的组件，后者将前者封装于内部。
经过 enhancer 处理得到的组件，能够直接接触到 store，监听、读取状态数据并触发action。

import { connect } from 'react-redux'

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

connect方法接受两个参数，mapStateToProps和mapDispatchToProps。他们定义了 UI 组件的业务逻辑。mapStateToProps 负责 state 映射到 UI 组件的参数 props，mapDispatchToProps 负责用户对 UI 组件的操作映射成 Action。

（1）mapStateToProps()

mapStateToProps是一个函数，用于建立一个从（外部的）state 对象到（UI组件的）props对象的映射关系。
mapStateToProps会订阅 Store，每当 state 更新的时候，会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。
mapStateToProps 的第一个参数总是 state 对象，还可以使用第二个参数，代表容器组件的 props 对象。

connect 方法可以省略 mapStateToProps 参数，这样 UI 组件就不会订阅 Store，导致 Store 的更新不会引起 UI 组件的更新。

接收的参数 state (即 store.getState() 的结果)，返回一个普通的 JavaScript 对象，对象的内容会被合并到最终的展示组件上。简单来说， mapStateToProps 就是从全局的状态数据中挑选、计算得到展示组件（UI 组件）所需数据的过程，即从 state 到组件属性的映射，正如其名。