semi-xi / blog

blog
4 stars 1 forks source link

react相关 #26

Open semi-xi opened 4 years ago

semi-xi commented 4 years ago

redux

1. conect 转换容器组件UI组件返回新的组件
2. useSelector 提取store中的state
3. userDispatch 获取dispatch的引用
4. useStore 获取store的引用
5. useEffect 主要是对值改变,运行一些副作用的函数
6. useMemo 主要是对值的改变,返还一些结算,是一个值的缓存
7. useCallback 主要是对值的改变,返回一个新的函数,是对一个值的缓存
8. combineReducers 用于连接多个reducer
9. applyMiddleware 返回一个函数。函数会传入会把下一个middleware的dispatch(参数名为next)作为参数,并返回一个action出来。
// function middleware() {
//   return next => action => {
//    return next(action)
//   }
// }
10. createStore 内部执行enhancer是这样的  enhancer(createStore)(reducer, preloadedState)
11. middlewares 内部是返回一个store的, applyMiddleWare(...middlewares) => (createStore) =>(reducer, preloadedState) => { var store = createStore(reducer, preloadedState) }
11. 基于上面两条,生成store就可以这样写 `var store = applyMiddleWare(...middlewares)(createStore)(reducer,preloadedState)`
12. createStore reducer dispatch是怎么串起来的 -> dispatch之后所有的reducer都会执行一次,这样确保可以找到唯一的reducer

react-router

1. props history location match等信息会注入到路由
2. 5.1会有新的方法 userParams(拿到match)/userLocation(拿到location)/userHistory(拿到history)/useRouteMatch(用于处理一些组件与路由无关的关联,返回一个match对象)

history 以及connect-react-router

1. history 以及`connected-react-router`都是为了深度整合redux与react-router
2. 需要用`connected-react-router`提供的connectRouter处理一下reducer
// const history = createBrowserHistory()
// createStore(connectRouter(history)(reducer), init, enhencer)
3. 需要用`connected-react-router`提供的ConnectedRouter包裹住路由以及提供props为histroy的属性
4. 这样就可以使用`store.dispatch(push('/about'))`
semi-xi commented 3 years ago

后续需要重新去研究一下applyMiddleWare的实现