immutable
- 不可变数据
- fromJS() 将JS对象转化为immutable对象
- toJS() 将immutable对象转化为JS对象(如果要console查看对象的结构,要用toJS方法先转为JS对象,不然好像看不到具体结构/可能是我没把...都点开吧)
- 使用get set方法,读取和修改immutable对象中属性
- 修改immutable对象,不会改变原对象,但是会返回一个新的对象。新对象复用原对象旧的结构。
react-redux
- 使用mapStateToProps将store中的数据转为当前组件的props
a. 容器组件/UI组件 容器组件负责redux交互 操作store,并将store以props的形式给UI组件
b. 默认传入store中的state
c. 返回值为对象 - 使用mapDispatchToProps将store中操作数据的方法转为当前对象的props
a. 默认传入dispatch方法 - 使用connect(mapStateToProps, mapDispatchToProps)(UI组件) 连接
reselect
使用reselect缓存 mapStateToPros计算返回的对象,提升性能。
通过例子来理解吧:
import { createSelector } from 'reselect'
import { FilterTypes } from '../constants'
export const selectFilterTodos = createSelector(
[getTodos, getFilters],
(todos, filters) => {
switch(filters) {
case FilterTypes.ALL:
return todos;
case FilterTypes.COMPLETED:
return todos.filter((todo) => todo.completed)
default:
return todos
}
}
)
const getTodos = (state) => {state.todos}
const getFilter = (state) => {state.filter}
getTodos getFilters 是两个获取redux中数据的方式,
selectFilterTodos调用的时候,会先计算这两个函数的结果,
如果和上一次计算的结果相同,其计算函数(第二个参数 中的箭头函数)不会执行。
如果和上一次计算的结果不同,其计算函数将会执行,参数为这两个函数的返回值。
selectFilterTodos的返回结果是mapStateToProps所需的方法,直接在mapStateToProps中使用该参数:
const mapStateToProps = (state) => {
return {
todos: selectFilterTodos(state)
}
}