• 作者:胡子大哈
    • 原文链接: http://huziketang.com/books/react/lesson40
    • 转载请注明出处,保留原文链接和作者信息。(本文未审核)

    我们要把 context 相关的代码从所有业务组件中清除出去,现在的代码里面还有一个地方是被污染的。那就是 src/index.js 里面的 Index

    1. ...
    2. class Index extends Component {
    3. static childContextTypes = {
    4. store: PropTypes.object
    5. }
    6. getChildContext () {
    7. return { store }
    8. }
    9. render () {
    10. return (
    11. <div>
    12. <Header />
    13. <Content />
    14. </div>
    15. )
    16. }
    17. }
    18. ...

    其实它要用 context 就是因为要把 store 存放到里面,好让子组件 connect 的时候能够取到 store。我们可以额外构建一个组件来做这种脏活,然后让这个组件成为组件树的根节点,那么它的子组件都可以获取到 context 了。

    我们把这个组件叫 Provider,因为它提供(provide)了 store

    实例图片

    src/react-redux.js 新增代码:

    1. export class Provider extends Component {
    2. static propTypes = {
    3. store: PropTypes.object,
    4. children: PropTypes.any
    5. }
    6. static childContextTypes = {
    7. store: PropTypes.object
    8. }
    9. getChildContext () {
    10. return {
    11. store: this.props.store
    12. }
    13. }
    14. render () {
    15. return (
    16. <div>{this.props.children}</div>
    17. )
    18. }
    19. }

    Provider 做的事情也很简单,它就是一个容器组件,会把嵌套的内容原封不动作为自己的子组件渲染出来。它还会把外界传给它的 props.store 放到 context,这样子组件 connect 的时候都可以获取到。

    可以用它来重构我们的 src/index.js

    1. ...
    2. // 头部引入 Provider
    3. import { Provider } from './react-redux'
    4. ...
    5. // 删除 Index 里面所有关于 context 的代码
    6. class Index extends Component {
    7. render () {
    8. return (
    9. <div>
    10. <Header />
    11. <Content />
    12. </div>
    13. )
    14. }
    15. }
    16. // 把 Provider 作为组件树的根节点
    17. ReactDOM.render(
    18. <Provider store={store}>
    19. <Index />
    20. </Provider>,
    21. document.getElementById('root')
    22. )

    这样我们就把所有关于 context 的代码从组件里面删除了。


    因为第三方评论工具有问题,对本章节有任何疑问的朋友可以移步到 React.js 小书的论坛 发帖,我会回答大家的疑问。