四、View（第一部分）

四、View（第一部分）

请打开 Demo 的首页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 模式。"controller view"组件只用来保存状态，然后将其转发给子组件。MyButtonController的源码很简单。

// 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。后者的源码甚至更简单。

// 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是一个纯组件（即不含有任何状态），从而方便了测试和复用。这就是"controll view"模式的最大优点。

MyButton只有一个逻辑，就是一旦用户点击，就调用this.createNewItem 方法，向Dispatcher发出一个Action。

// components/MyButtonController.jsx

  // ...
  createNewItem: function (event) {
    ButtonActions.addNewItem("new item");
  }

上面代码中，调用createNewItem方法，会触发名为addNewItem的Action。