老师您好,请问为什么在是connect之后可以直接通过prosp获取到属性方法,这是什么原理?

来源:4-7 Redux状态管理7-使用 React-redux(Connect 可以用装饰器的方法来书写)

qq_Wonderful_8

2018-01-13

老师您好,请问为什么在是connect之后可以直接通过prosp获取到属性方法,这是什么原理?

写回答

1回答

慕瓜8449030

2018-01-16

你好,你可以看下我们倒数第二章,自己实现一个redux,就对原理了解的更深
connect其实是一个高阶组件,获取state,然后传递给组件的props里,给你看下关键代码

export const connect = (mapStateToProps=state=>state,mapDispatchToProps={})=>(WrapComponent)=>{
	return class ConnectComponent extends React.Component{
		static contextTypes = {
			store:PropTypes.object
		}
		constructor(props, context){
			super(props, context)
			this.state = {
				props:{}
			}
		}
		componentDidMount(){
			const {store} = this.context
			store.subscribe(()=>this.update())
			this.update()
		}
		update(){
			const {store} = this.context
			const stateProps = mapStateToProps(store.getState())
			const dispatchProps = bindActionCreators(mapDispatchToProps, store.dispatch)
			this.setState({
				props:{
					...this.state.props,
					...stateProps,
					...dispatchProps	
				}
			})
		}
		render(){
			return <WrapComponent {...this.state.props}></WrapComponent>
		}
	}
}


0
0

Redux+React Router+Node.js全栈开发

全网唯一的React 16+Redux+React Router4实战课程,学到手是你的真本领!

1822 学习 · 750 问题

查看课程