React

未分类

React

生命周期

• getInitialState
• getDefaultProps
• componentWillMount
• componentDidMount
• componentWillReceiveProps
• shouldcomponentUpdate
• componentWillUpdate
• componentDidUpdate
• componentWillUnmount

Redux

源码很短，非常精简：
- compose: function reducer
- applymiddleware: createStore的一个enhance函数，对dispatch函数进行层层compose
- middleware: 接收一个旧dispatch，返回一个新的dispatch，在其中处理各种事情
- bindActionCreators: actionCreators.map(fn => (...args) => dispatch(fn(...args)))
- createStore: 对于reducer的getter和setter(dispatch)，以及一些subscribe、observable接口等。
- combineReduces: 整合函数

Redux-thunk

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') { // 使redux能够接收类型为function的action
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  };
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;

Redux-promise

export default function promiseMiddleware({ dispatch }) {
  return next => action => {
    if (!isFSA(action)) {
      return isPromise(action)
        ? action.then(dispatch)
        : next(action);
    }
    return isPromise(action.payload)
      ? action.payload.then(
          result => dispatch({ ...action, payload: result }),
          error => {
            dispatch({ ...action, payload: error, error: true });
            return Promise.reject(error);
          }
        )
      : next(action);
  };
}

Redux

https://github.com/sunyongjian/blog/issues/21

React-redux

https://juejin.im/post/59cb5eba5188257e84671aca

// selectorFactory
(dispatch, options) => (state, props) => ({  thing: state.things[props.thingId],  saveThing: fields => dispatch(actionCreators.saveThing(props.thingId, fields)),})

https://github.com/antgod/blog/blob/master/%E6%96%87%E7%AB%A0/react%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90%E7%B3%BB%E5%88%97/7.react-redux%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90.md

其实react-redux主要的职责就是一个，从context里面获取store，然后使用selectorFactory创建一个selector，其中会调用用户提供的mapStateProps，mapDispatchToProps和mergeProps方法，将store的state和dispatch跟组件的ownProps合并。然后还有一个makeSelectorStatefull方法，通过shallowCompare的比较方式来对比当前props和之前的props确定shouldComponentUpdate是否为false

context 可能会因为某个组件shouldComponent而卡住

Redux-saga

2333