React学习手册

208

｜

第

9

章

图

9

-

1

：组件树中的数据流传递

显式传递

Store

首先，将

Store

集成到

UI

中最合乎逻辑的做法是显式地将它作为属性在组件树中向下传

递。该方法很简单，对于只包含少量嵌套组件的小型应用程序效果非常好。

接下来看看如何将

Store

集成到颜色管理器程序中。在

./index.js

文件中，我们将会渲染

一个

App

组件并传递

Store

：

import React from 'react'

import ReactDOM from 'react-dom'

import App from './components/App'

import storeFactory from './store'

const store = storeFactory()

const render = () =>

ReactDOM.render(

<App store={store}/>,

document.getElementById('react-container')

)

store.subscribe(render)

render()

这就是

./index.js

文件中的内容。在这个文件中，我们使用

storeFactory

创建了一个

Store

，并将

App

组件渲染到了

DOM

文档中。当

App

组件渲染完毕后，

Store

会作为属性

React Redux

｜

209

传递给它。每次

Store

发生变化后，

render

函数都会被触发执行，这样就可以使用新的

State

数据高效地更新

UI

了。

现在已经将 ...