四、View(第一部分)

最后更新于:2022-04-01 22:36:15

## 四、View(第一部分) 请打开 Demo 的首页[`index.jsx`](https://github.com/ruanyf/extremely-simple-flux-demo/blob/master/index.jsx) ,你会看到只加载了一个组件。 > ~~~ > // index.jsx > var React = require('react'); > var ReactDOM = require('react-dom'); > var MyButtonController = require('./components/MyButtonController'); > > ReactDOM.render( > , > document.querySelector('#example') > ); > ~~~ 上面代码中,你可能注意到了,组件的名字不是 `MyButton`,而是 `MyButtonController`。这是为什么? 这里,我采用的是 React 的 [controller view](http://blog.andrewray.me/the-reactjs-controller-view-pattern/) 模式。"controller view"组件只用来保存状态,然后将其转发给子组件。`MyButtonController`的[源码](https://github.com/ruanyf/extremely-simple-flux-demo/blob/master/components/MyButtonController.jsx)很简单。 > ~~~ > // components/MyButtonController.jsx > var React = require('react'); > var ButtonActions = require('../actions/ButtonActions'); > var MyButton = require('./MyButton'); > > var MyButtonController = React.createClass({ > createNewItem: function (event) { > ButtonActions.addNewItem('new item'); > }, > > render: function() { > return onClick={this.createNewItem} > />; > } > }); > > module.exports = MyButtonController; > ~~~ 上面代码中,`MyButtonController`将参数传给子组件`MyButton`。后者的[源码](https://github.com/ruanyf/extremely-simple-flux-demo/blob/master/components/MyButton.jsx)甚至更简单。 > ~~~ > // components/MyButton.jsx > var React = require('react'); > > var MyButton = function(props) { > return
> >
; > }; > > module.exports = MyButton; > ~~~ 上面代码中,你可以看到[`MyButton`](https://github.com/ruanyf/extremely-simple-flux-demo/blob/master/components/MyButton.jsx)是一个纯组件(即不含有任何状态),从而方便了测试和复用。这就是"controll view"模式的最大优点。 `MyButton`只有一个逻辑,就是一旦用户点击,就调用[`this.createNewItem`](https://github.com/ruanyf/extremely-simple-flux-demo/blob/master/components/MyButtonController.jsx#L27) 方法,向Dispatcher发出一个Action。 > ~~~ > // components/MyButtonController.jsx > > // ... > createNewItem: function (event) { > ButtonActions.addNewItem('new item'); > } > ~~~ 上面代码中,调用`createNewItem`方法,会触发名为`addNewItem`的Action。
';