javascript - react .js : Managing State and Component Rerender

Question

当我开始使用 React.js 进行冒险时，我遇到了瓶颈。我有以下时间跟踪应用程序的 UI 在多个级别上工作:

http://jsfiddle.net/technotarek/4n8n17tr/

如预期的那样工作:

1. 根据用户输入进行过滤
2. 项目时钟可以独立启动和停止

什么不起作用:

1. 如果您启动一个或多个时钟然后尝试过滤，则任何不在过滤结果集中的时钟在重新显示后都会重置。 (只需点击所有时钟的开始，然后搜索项目，然后清除搜索输入。)

我假设发生这种情况是因为 setState 在过滤器输入的更改上运行，它重新渲染所有内容并使用时钟 getInitialState 值。

那么，当过滤器重新渲染组件时，保留这些时钟和按钮“状态”的正确方法是什么？我不应该将时钟或按钮“状态”存储为真正的 React 状态吗？我是否需要一个函数来在重新渲染之前显式保存时钟值？

我不要求任何人修复我的代码。相反，我希望在我对 React 的理解失败的地方找到一个指针。

为了满足 SO 的代码要求，下面是包含时间跟踪器中每一行的组件。时钟通过 toggleClock 启动。 IncrementClock 写入被搜索过滤器清除的状态。请在上面的 fiddle 链接中查看完整代码。

var LogRow = React.createClass({

    getInitialState: function() {
        return {
            status: false,
            seconds: 0
        };
    },

    toggleButton: function(status) {
        this.setState({
            status: !this.state.status
        });
        this.toggleClock();
    },

    toggleClock: function() {
        var interval = '';
        if(this.state.status){
            // if clock is running, pause it.
            clearInterval(this.interval);
        } else {
            // otherwise, start it
            this.interval = setInterval(this.incrementClock, 1000);
        }
    },

    incrementClock: function() {
        this.setState({ seconds: this.state.seconds+1 });
    },

    render: function() {

        var clock = <LogClock seconds={this.state.seconds} />

        return (
            <div>
                <div className="row" key={this.props.id}>
                    <div className="col-xs-7"><h4>{this.props.project.title}</h4></div>
                    <div className="col-xs-2 text-right">{clock}</div>
                    <div className="col-xs-3 text-right"><TriggerButton status={this.state.status} toggleButton={this.toggleButton} /></div>
                </div>
                <hr />
            </div>
        );
    }
})

Answer 1

过滤时，您是从呈现的输出中删除 LogRow 组件 - 当发生这种情况时，React 卸载组件并处理其状态。当您随后更改过滤器并再次显示一行时，您将获得一个全新的 LogRow 组件，因此再次调用 getInitialState()。

(这里也有泄漏，因为您没有清除使用 componentWillUnmount() 生命周期钩子(Hook)卸载这些组件时的间隔 - 这些间隔仍在后台运行)

要解决这个问题，您可以将计时器状态以及控制和递增计时器状态的方法移出 LogRow 组件，这样它的工作只是显示和控制当前状态，而不是拥有它。

您当前正在使用 LogRow 组件将项目计时器的状态和行为联系在一起。您可以将此状态和行为管理移至将以相同方式管理它的父组件，或移至另一个对象，例如:

function Project(props) {
  this.id = props.id
  this.title = props.title

  this.ticking = false
  this.seconds = 0

  this._interval = null
}

Project.prototype.notifyChange = function() {
  if (this.onChange) {
    this.onChange()
  }
}

Project.prototype.tick = function() {
  this.seconds++
  this.notifyChange()
}

Project.prototype.toggleClock = function() {
  this.ticking = !this.ticking
  if (this.ticking) {
    this.startClock()
  }
  else {
    this.stopClock()
  }
  this.notifyChange()
}

Project.prototype.startClock = function() {
  if (this._interval == null) {
    this._interval = setInterval(this.tick.bind(this), 1000)
  }
}

Project.prototype.stopClock = function() {
  if (this._interval != null) {
    clearInterval(this._interval)
    this._interval = null
  }
}

由于正在使用的 clearInterval 是变化的外部来源，您需要以某种方式订阅它们，所以我实现了注册单个 onChange 回调，LogRow 组件在安装到下面的代码片段中时正在执行此操作。

下面的工作代码片段做了最简单和直接的事情来实现这一点，因此解决方案有一些不鼓励的做法(修改 Prop )和警告(你只能在一个项目上有一个“听众”)但是它作品。 (这通常是我使用 React 的经验——它首先起作用，然后你才能让它“正确”)。

接下来的步骤可能是:

• PROJECTS 实际上是一个单例 Store - 您可以将其设为一个对象，允许注册监听器以更改项目状态。然后，您可以添加一个 Action 对象来封装对项目状态的触发更改，这样 LogRow 永远不会直接接触其 project 属性，仅从中读取并侧向调用 Action 来更改它. (这只是间接的，但有助于思考数据流)。查看Less Simple Communication react-trainig 存储库中的示例，用于此的工作示例。
• 您可以让 LogRow 完全变笨，方法是在更高级别上监听所有项目更改并根据更改重新呈现所有内容。将单个项目 Prop 传递给 LowRow 将允许您实现 shouldComponentUpdate() 因此只有需要显示更改的行才真正重新呈现。

<meta charset="UTF-8"> 
<script src="http://fb.me/react-with-addons-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
    <div class="row">
        <div id="worklog" class="col-md-12">
        </div>
    </div>
</div>
<script type="text/jsx;harmony=true">void function() { "use strict";

/* Convert seconds input to hh:mm:ss */
Number.prototype.toHHMMSS = function () {
    var sec_num = parseInt(this, 10);
    var hours   = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    if (hours   < 10) {hours   = "0"+hours;}
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}
    var time    = hours+':'+minutes+':'+seconds;
    return time;
}

function Project(props) {
  this.id = props.id
  this.title = props.title

  this.ticking = false
  this.seconds = 0

  this._interval = null
}

Project.prototype.notifyChange = function() {
  if (typeof this.onChange == 'function') {
    this.onChange()
  }
}

Project.prototype.tick = function() {
  this.seconds++
  this.notifyChange()
}

Project.prototype.toggleClock = function() {
  this.ticking = !this.ticking
  if (this.ticking) {
    this.startClock()
  }
  else {
    this.stopClock()
  }
  this.notifyChange()
}

Project.prototype.startClock = function() {
  if (this._interval == null) {
    this._interval = setInterval(this.tick.bind(this), 1000)
  }
}

Project.prototype.stopClock = function() {
  if (this._interval != null) {
    clearInterval(this._interval)
    this._interval = null
  }
}

var PROJECTS = [
              new Project({id: "1", title: "Project ABC"}),
              new Project({id: "2", title: "Project XYZ"}),
              new Project({id: "3", title: "Project ACME"}),
              new Project({id: "4", title: "Project BB"}),
              new Project({id: "5", title: "Admin"})
            ];

var Worklog = React.createClass({

    getInitialState: function() {
        return {
            filterText: '',
        };
    },

    componentWillUnmount: function() {
        this.props.projects.forEach(function(project) {
          project.stopClock()
        })
    },

    handleSearch: function(filterText) {
        this.setState({
            filterText: filterText,
        });
    },

    render: function() {

        var propsSearchBar = {
            filterText: this.state.filterText,
            onSearch: this.handleSearch
        };

        var propsLogTable = {
            filterText: this.state.filterText,
            projects: this.props.projects
        }

        return (
            <div>
                <h2>Worklog</h2>
                <SearchBar {...propsSearchBar} />
                <LogTable {...propsLogTable} />
            </div>
        );
    }
});

var SearchBar = React.createClass({

    handleSearch: function() {
        this.props.onSearch(
            this.refs.filterTextInput.getDOMNode().value
        );
    },

    render: function() {

        return (
            <div className="form-group">
                <input type="text" className="form-control" placeholder="Search for a project..." value={this.props.filterText} onChange={this.handleSearch} ref="filterTextInput" />
            </div>
        );
    }

})

var LogTable = React.createClass({

    render: function() {

        var rows = [];
        this.props.projects.forEach(function(project) {

            if (project.title.toLowerCase().indexOf(this.props.filterText.toLowerCase()) === -1) {
                return;
            }
            rows.push(<LogRow key={project.id} project={project} />);
        }, this);

        return (
            <div>{rows}</div>
        );
    }

})

var LogRow = React.createClass({
  componentDidMount: function() {
    this.props.project.onChange = this.forceUpdate.bind(this)
  },

  componentWillUnmount: function() {
    this.props.project.onChange = null
  },

  onToggle: function() {
    this.props.project.toggleClock()
  },

  render: function() {
    return <div>
      <div className="row" key={this.props.id}>
        <div className="col-xs-7">
          <h4>{this.props.project.title}</h4>
        </div>
        <div className="col-xs-2 text-right">
          <LogClock seconds={this.props.project.seconds}/>
        </div>
        <div className="col-xs-3 text-right">
          <TriggerButton status={this.props.project.ticking} toggleButton={this.onToggle}/>
        </div>
      </div>
      <hr />
    </div>
  }
})

var LogClock = React.createClass({

    render: function() {

        return (
            <div>{this.props.seconds.toHHMMSS()}</div>
        );
    }
});

var TriggerButton = React.createClass({

    render: function() {

        var button;
          button = this.props.status != false
                    ? <button className="btn btn-warning" key={this.props.id} onClick={this.props.toggleButton}><i className="fa fa-pause"></i></button>
                    : <button className="btn btn-success" key={this.props.id} onClick={this.props.toggleButton}><i className="fa fa-play"></i></button>

        return (
            <div>
                {button}
            </div>
        );

    }

})

React.render(<Worklog projects={PROJECTS} />, document.getElementById("worklog"));

}()</script>