redux

  1. redux是什么

    1. redux专注于状态管理的库,解藕react(即不依赖于react,vue或者angular等也可以使用)
    2. 单一状态,单向数据流
    3. 核心概念:store、action、state、reducer
      通过reducer新建store(store中记录所有的state,store有三个方法,getState, dispatch, subscribe),随时通过store.getState获取状态
      需要状态变更store.dispatch(action)来修改状态,
      reducer函数接受state和action,返回新的state, 可以store.subscribe(render())监听每次修改(监听render()是为了重新渲染render(),更新最新状态)。
    4. redux默认只处理同步,若想处理异步,需要redux-chunk插件,并使用applyMiddleware开启chunk中间件
  2. 有了redux为什么使用react-redux

    为了方便管理,使用react-redux,忘记subscribe,记住reducer, action, dispatch即可
    react-redux提供了Provider和Connect两个接口,Povider组件在最外层,传入store,全局使用。Connect负责从外部获取组件需要的参数。

  3. 当一个组件的state来源于多个reducer时,需要使用combineReducers对reducer进行合并。

  4. 高阶组件:将一个函数传入返回另外一个函数

    高阶组件作用:属性代理和反向继承

    // 属性代理
    function wrapper(Comp) {
    	return class WrapperComp extends React.Component {
    		render() {
    			return (<Comp {...this.props} name='lmh' />)
    		}
    	}
    }
    @wrapper
    class Hello extends React.Component {
    	render() {
    		return <h2>hello</h2>
    	}
    }
    // 反向继承
    function wrapper(Comp) {
    	return class WrapperComp extends Comp {
    		componentDidMount() {
    		 	consloe.log('在原有的组件上新增componentDidMount生命周期函数')
    		 }
    		 render() {
    		 	return <p> 重绘render</p>
    		 }
    	}
    

你可能感兴趣的:(笔记整理)