[英]React.js: Managing State and Component Rerender
当我开始使用React.js进行冒险时,我已经碰壁了。 我有以下时间跟踪应用程序的UI在几个级别上工作:
http://jsfiddle.net/technotarek/4n8n17tr/
什么是希望的工作:
什么不起作用:
我假设发生这种情况是因为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>
);
}
})
当您进行过滤时,您将从呈现的输出中删除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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.