## 四、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。
