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