🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 八、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 <MyButton > 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 <li key={i}>{listItem}</li>; > }); > > return <div> > <ul>{itemHtml}</ul> > <button onClick={props.onClick}>New Item</button> > </div>; > }; > > module.exports = MyButton; > ~~~