Redu源码剖析
前面写了《React组件性能优化》《Redux性能优化》《React-Redux性能优化》,但是都没有从这些框架的实现上讲为什么?这次就从源码上来分析一下这些框架的实现原理,以更深入的理解这些框架,并更好的使用它们。
Redux的api很简单,下面一个一个的分析。
createStore
首先说下它的三个参数reducer、preloadedState、enhancer。reducer是唯一必传的参数,它很重要,因为它决定了整个state。preloadedState就是state的初始值。第三个参数不是特别常用,它是个函数,如果它存在的情况下,会执行下面的语句:
enhancer(createStore)(reducer, preloadedState)
很显然enhancer和middleware作用很像,用来增强store。
createStore内部维护了currentReducer(当前的reducer)和currentState(当前的state),初始化的时候:
currentReducer = reducercurrentState = preloadedState
这两个变量很重要,因为很多操作都和它们相关。
subscribe
在createStore内部维护了两个数组currentListeners、nextListeners。nextListeners的存在是为了避免在listeners执行过程中,listeners发生改变,导致错误。listeners的添加或删除都是对nextListeners进行操作的。
nextListeners = currentListeners.slice()
保证nextListeners的修改不会影响currentListeners。
subscribe(listener)的返回值是个函数,执行这个函数就会unsubscribe(listener),取消监听。
dispatch
很重要,因为只能通过它修改state,它只接收一个参数action,action必须是简单对象,而且必须有type属性。在dispatch内部关键代码是:
currentState = currentReducer(currentState, action)var listeners = currentListeners = nextListenersfor (var i = 0; i createStore(reducer, preloadedState, enhancer))的时候会执行
dispatch({ type: ActionTypes.INIT })
所以reducer和listeners在store创建的时候都会被执行一遍,listeners没有什么特别要关注的。reducer执行必须关注,因为它的执行结果影响你的数据。比如createStore的时候你没有传入preloadedState,在reducer内的state有默认参数,正常情况下你的reducer会使用default分支处理这个action,而且一般default分支会直接返回state,所以这种情况下store创建完后,使用getState()获取的值就是默认参数组成的state。#### getState获取store中的state,很简单,主要代码:
return currentState
在没有dispatch正在执行的情况下,直接返回前面说很重要的currentState。#### replaceReducer参数是nextReducer,也很简单,关键代码:
currentReducer = nextReducer
dispatch({ type: ActionTypes.INIT })
直接拿nextReducer替换掉前面说很重要的currentReducer,后面再执行dispatch,action就会被nextReducer处理,处理的结果赋值给currentState。替换之后会执行一遍初始化action。## combineReducers代码虽然看起来很长,但是大多都是用来处理校验reducer的。它接收的参数reducers是个对象,对象的value不能是undefined,必须是function。符合这个标准的reducer会被放入finalReducers中。然后再对finalReducers进行校验,reducer必须有default处理,不能处理Redux内部的action type,比如@@redux/INIT。然后返回一个函数combination(state = {}, action),它也是一个reducer,可以被再次和其他reducer combine。一般combination等同于currentReducer,它的返回结果会赋给state,combination的关键代码如下:
var finalReducerKeys = Object.keys(finalReducers)
var hasChanged = false
var nextState = {}
for (var i = 0; i dispatch(actionCreator(...args))
直接给这个返回的函数传actionCreator的参数就可以直接触发dispatch,这也是bindActionCreators的目的,简化操作,弱化dispatch的存在感。如果actionCreators是个对象会进行另外的操作,返回一个对象,下面是关键代码。
var keys = Object.keys(actionCreators)
var boundActionCreators = {}
for (var i = 0; i dispatch(actionCreator(...args))
}
return boundActionCreators
其实里面的处理和单个function的处理是一样的。## applyMiddleware一个可以被执行三次的柯里化函数,代码虽然简单,但是给Redux带来却是无限可能。它的第一次执行的时候参数是一系列的middlewares,第二次执行参数是createStore,返回的是一个和createStore接收同样参数的函数,再次被执行的话,就会返回dispatch强化之后的store。关键代码如下:
var middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
const last = chain[funcs.length - 1]
const rest = chain.slice(0, -1)
dispatch = rest.reduceRight((composed, f) => f(composed), last(store.dispatch))
这里只写了多个middleware的情况,单个middlewares更简单。代码很简单,逻辑也很简单,作用很大。比如使用thunk可以做异步action。以上基本是Redux的全部关键代码剖析,Redux简单而强大。#JavaScript、react.js、reducer、dispatch#
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!