什么是Provider
最簡單的就是 提供store
一般我們這樣寫在代碼里,在我們的組件之外用Provider
包裹起來拙毫,作用就是為了讓里面的組件能夠獲取到store的值
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
</Route>
</Router>
</Provider>
詳解
export default class Provider extends Component {
getChildContext() { // getChildContext: 將store傳遞給子孫component
return { store: this.store }
}
constructor(props, context) {
super(props, context)
this.store = props.store
}
componentWillReceiveProps(nextProps) {
const { store } = this
const { store: nextStore } = nextProps
if (store !== nextStore) {
warnAboutReceivingStore()
}
}
render() {
let { children } = this.props
return Children.only(children)
}
}
- 使用react的context屬性缕允,可以將屬性(props)直接給子孫component藏鹊,無須通過props層層傳遞。
- getChildContext : 將外部的store對象放入context對象中呛梆,使子孫組件上的connect可以直接訪問到context對象中的store凯傲。
- constructor :初始化獲得了props中的store
- render : 渲染了其子級元素, 使整個應(yīng)用成為Provider的子組件