Question

在Facebook的反应示例here中，我发现此代码显示了如何使用mixins来设置间隔。我对this.intervals发生的事情感到困惑。据我所知，状态包含渲染改变数据，而理想情况下，props处理从父组件传递的数据。我本来会使用this.props.intervals，但这两者之间的区别是什么？

      var SetIntervalMixin = {
      componentWillMount: function() {
        this.intervals = [];
      },
      setInterval: function() {
        this.intervals.push(setInterval.apply(null, arguments));
      },
      componentWillUnmount: function() {
        this.intervals.forEach(clearInterval);
      }
    };

    var TickTock = React.createClass({
      mixins: [SetIntervalMixin], // Use the mixin
      getInitialState: function() {
        return {seconds: 0};
      },
      componentDidMount: function() {
        this.setInterval(this.tick, 1000); // Call a method on the mixin
      },
      tick: function() {
        this.setState({seconds: this.state.seconds + 1});
      },
      render: function() {
        return (
          <p>
            React has been running for {this.state.seconds} seconds.
          </p>
        );
      }
    });

    ReactDOM.render(
      <TickTock />,
      document.getElementById('example')
    );

Answer 1

当您使用props时，您知道100％确定该值应该来自它的直接父组件（作为属性）。

当您看到state时，您知道该值正在该组件中生成/创建它是自己的。

钥匙，当状态发生变化时，下面的每个孩子都会在收到的任何道具发生变化时进行渲染。

您的Mixin不是正常的React类。它只是一个对象，因此在this的情况下this.interval是对正在执行该方法的对象范围的引用 - TickTock。

了解React道具

1 个答案: