八、View （第二部分）
最后更新于：2022-04-01 22:36:24
## 八、View （第二部分）
现在，我们再回过头来修改 [View](https://github.com/ruanyf/extremely-simple-flux-demo/blob/master/components/MyButtonController.jsx) ，让它监听 Store 的 `change` 事件。
> ~~~
> // components/MyButtonController.jsx
> var React = require('react');
> var ListStore = require('../stores/ListStore');
> var ButtonActions = require('../actions/ButtonActions');
> var MyButton = require('./MyButton');
>
> var MyButtonController = React.createClass({
> getInitialState: function () {
> return {
> items: ListStore.getAll()
> };
> },
>
> componentDidMount: function() {
> ListStore.addChangeListener(this._onChange);
> },
>
> componentWillUnmount: function() {
> ListStore.removeChangeListener(this._onChange);
> },
>
> _onChange: function () {
> this.setState({
> items: ListStore.getAll()
> });
> },
>
> createNewItem: function (event) {
> ButtonActions.addNewItem('new item');
> },
>
> render: function() {
> return items={this.state.items}
> onClick={this.createNewItem}
> />;
> }
> });
> ~~~
上面代码中，你可以看到当`MyButtonController` 发现 Store 发出 `change` 事件，就会调用 `this._onChange` 更新组件状态，从而触发重新渲染。
> ~~~
> // components/MyButton.jsx
> var React = require('react');
>
> var MyButton = function(props) {
> var items = props.items;
> var itemHtml = items.map(function (listItem, i) {
> return {listItem} ;
> });
>
> return
';
>
;
> };
>
> module.exports = MyButton;
> ~~~
- {itemHtml}