## 四、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(
> <MyButtonController/>,
> 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 <MyButton
> 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 <div>
> <button onClick={props.onClick}>New Item</button>
> </div>;
> };
>
> 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。
