React-Redux源码

最新推荐文章于 2025-09-03 16:51:19 发布

转载最新推荐文章于 2025-09-03 16:51:19 发布 · 61 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5bab37b56fb9a05cf67a90ea

文章标签：

#javascript #ViewUI

本文详细解析React Context API的使用方式与注意事项，以及Redux Connect高阶组件的实现原理，帮助开发者掌握状态管理和组件间通信的核心技术。

context了解一下

上下文环境
使用了就要类型校验
只能被子组件访问到

父组件中要对将要传入子组件的context进行类型校验并设置context对象

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      user: 'binyellow'
    }
  }
  static childContextTypes = {
    user: propTypes.string
  }
  getChildContext(){
    return this.state
  }
  render(){
    return (
      <div>
        App
        <GrandChild></GrandChild>
      </div>
    )
  }
}
复制代码

在使用context的子组件中必须校验

class GrandChild extends Component{
  static contextTypes = {
    user: propTypes.string
  }
  render(){
    console.log(this.context);
    return(
      <div>
        GrandChildName: {this.context.user}
      </div>
    )
  }
}
复制代码

高阶函数了解一下

connect函数形如:connect(mapStateToProps,mapDispatchToProps)(APP)
实质上是高阶函数中返回了一个高阶组件
怎么实现

export function connect(mapStateToProps,mapDispatchToProps){
    return function(WrappedComponent){
        return class ConnectComponent extends Component{
            ...
        }
    }
}
复制代码

箭头函数实现

export const connect = (mapStateToProps,mapDispatchToProps)=>(WrappedComponent)=>{
    return class ConnectComponent extends Component{
        ...
    }
}
复制代码

connect是什么：connect其实就是给传入的组件包裹上context的属性,来拿到全局的属性store

正题：connect如何实现

export const connect = (mapStateToProps=state=>state,mapDispatchToProps={})=>(WrappedComponent)=>{
    return class ConnectComponent extends Component{
        static contextTypes = {
            store: propTypes.object
        }
        constructor(props,context){
            super(props,context)
            this.state = {
                props:{}
            }
        }
        componentDidMount(){
            //每次dispatch都会触发subscribe,利用此来更新stateProps
            const {store} = this.context;
            store.subscribe(()=>this.update())
            this.update()
        }
        update(){
            const {store} = this.context;
            console.log(store);
            // 这里面来把state分发出去
            const stateProps = mapStateToProps(store.getState());
            // 这里把action都包一层dispatch
            const actionProps = bindActionCreators(mapDispatchToProps,store.dispatch)   // bindActionCreators详见redux
            this.setState({
                props: {
                    ...this.state.props,
                    ...stateProps,
                    ...actionProps
                }
            })
        }
        render(){
            return (
                // 从context中获取的state和用dispatch包装后的action传给组件WrappedComponent
                <WrappedComponent {...this.state.props}></WrappedComponent>
            )
        }
    }
}
复制代码