React.js：管理狀態和組件重新呈現

Question

當我開始使用React.js進行冒險時，我已經碰壁了。 我有以下時間跟蹤應用程序的UI在幾個級別上工作：

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

什么是希望的工作：

1. 根據用戶輸入進行過濾
2. 項目時鍾可以獨立啟動和停止

什么不起作用：

1. 如果您啟動一個或多個時鍾然后嘗試進行過濾，則重新顯示不在過濾器結果集中的任何時鍾都會重置。 （只需單擊所有時鍾的開頭，然后搜索項目，然后清除搜索輸入。）

我假設發生這種情況是因為setState運行onChange過濾器輸入，它重新渲染所有內容並使用時鍾getInitialState值。

那么，當濾波器重新渲染組件時，保留這些時鍾和按鈕的“狀態”的正確方法是什么？ 我不應該將時鍾或按鈕“狀態”存儲為真正的React狀態嗎？ 我需要一個函數在重新渲染之前顯式保存時鍾值嗎？

我不是要求任何人修改我的代碼。 相反，我希望有一個指針，我對React的理解失敗了。

為了滿足SO的代碼要求，下面是包含時間跟蹤器中每一行的組件。 時鍾通過toggleClock啟動。 IncrementClock寫入搜索過濾器清除的狀態。 請參閱上面的小提琴鏈接中的完整代碼。

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()生命周期鈎子卸載這些組件時，你沒有清除間隔 - 這些間隔仍然在后台運行）

要解決這個問題，您可以移動計時器狀態以及控制它並將其從LogRow組件中遞增出來的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組件安裝在下面的代碼段中時，它正在執行。

下面的工作代碼片段可以實現最簡單和最直接的事情，因此解決方案有一些沮喪的做法（修改道具）和警告（你只能在項目上有一個“監聽器”），但它有效。 （這通常是我對React的體驗 - 它首先運行，然后你將其設為“正確”）。

接下來的步驟可能是：

• PROJECTS實際上是一個單身Store - 您可以將其作為一個對象，允許注冊監聽器以更改項目狀態。 然后，您可以添加一個Action對象來封裝對項目狀態的觸發更改，以便LogRow永遠不會直接觸及其project道具，只讀取它並側向調用Action來更改它。 （這只是間接的，但有助於思考數據流）。 請參閱react-trainig repo中的Less Simple Communication示例，了解其中的一個實例。
• 您可以通過在更高級別偵聽所有項目更改並在更改時重新呈現所有內容來使LogRow完全變得愚蠢。 將單個項目道具傳遞給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>