赵走x博客
网站访问量:151955
首页
书籍
软件
工具
古诗词
搜索
登录
49、Flux:理念、回顾Whinepad
48、lint、Flow、测试与复验:测试
47、lint、Flow、测试与复验:Flow
46、lint、Flow、测试与复验:ESLint
45、lint、Flow、测试与复验:package.json
44、构建实例应用:<Whinepad>
43、构建实例应用:应用配置
43、构建实例应用:<Excel>:改进的新版本
42、构建实例应用:组件:对话框
41、构建实例应用:组件:Actions
39、构建实例应用:表单:Form
38、构建实例应用:表单:<FormInput>“工厂组件”
37、构建实例应用:表单:Rating组件
36、构建实例应用:表单:Suggest
35、构建实例应用:Button组件
34、构建实例应用:组件
33、构建实例应用:Whinepad v.0.0.1
32、发布
31、开始构建
30、安装必备工具
29、为应用开发做准备:一个模板应用
28、JSX 和表单
27、JSX 和HTML 的区别
26、在JSX 中返回多个节点
25、展开属性
24、HTML 实体
23、JSX入门
22、Excel:一个出色的表格组件:下载表格数据
21、Excel:一个出色的表格组件:即时回放
20、Excel:一个出色的表格组件:搜索
19、Excel:一个出色的表格组件:编辑数据
18、Excel:一个出色的表格组件:排序
17、Excel:一个出色的表格组件
16、 PureRenderMixin
15、 性能优化:避免组件更新
14、 生命周期示例:使用子组件
13、组件生命周期示例:使用mixin
12、组件:生命周期方法
11、中途改变属性
10、从外部访问组件
9、在初始化state 时使用props:一种反模式
8、 props 与state
7、关于DOM 事件的说明
6、组件:带状态的文本框组件
5、组件的state
4、组件的propTypes
3、组件的属性
2、组件的基础
1、Hello World
50、Flux:Store
21、Excel:一个出色的表格组件:即时回放
资源编号:76071
书籍
React快速上手开发
热度:90
如你所见,组件会关心自身的state,并让React 选择适当的时机进行渲染和重新渲染。这意味着,在给定相同数据(state 和props)的情况下,无论这个特定数据状态的前后发生了什么改变,应用看起来都应该是完全一样的。这个特性使得你可以重现一些外界出现的问题并进行调试。
如你所见,组件会关心自身的state,并让React 选择适当的时机进行渲染和重新渲染。这意味着,在给定相同数据(state 和props)的情况下,无论这个特定数据状态的前后发生了什么改变,应用看起来都应该是完全一样的。这个特性使得你可以重现一些外界出现的问题并进行调试。 假设用户在使用你的应用时遇到问题,他们只需要点击一个按钮就能完成问题上报,而无需解释当时发生的事情。这份问题报告只需要把this.state 和this.props 发回给你,你就可以重现实际对应的应用状态,并看到视觉效果。 React 会通过同一个state 和props 渲染出同一份应用界面。基于这个事实,我们还可以开发出“撤销”功能。实际上,这个功能的实现非常简单:只需要还原之前的state 就可以了。 有了这个想法,让我们更进一步,做点更好玩的事情。每当Excel 组件的state 发生改变时,我们都把state 记录下来,并进行回放。让state 在你面前一一回放出来将会非常有趣。 从实现上看,我们不关注改变是何时发生的,只需要每隔一秒种“回放”一次应用的更改。要实现该功能,我们添加一个`_logSetState() `方法,搜索原有的setState() 调用并全部替换为这个新方法。 因此, 所有的this.setState(newSate); 都会变为`this._logSetState(newState);`。 `_logSetState `方法需要完成两件事情:记录新的state,并把state 传递到setState() 方法中。这里提供一个示例实现,对state 进行深复制,并添加到`this._log `数组中: ``` var Excel = React.createClass({ _log: [], _logSetState: function(newState) { // 克隆一份原来的state并记录下来 this._log.push(JSON.parse(JSON.stringify( this._log.length === 0 ? this.state : newState ))); this.setState(newState); }, // ... }); ``` 所有state 都被记录下来后,还需要一个回放state 的功能。要触发回放,我们可以简单地添加一个事件监听器,捕捉键盘行为并调用_replay() 函数: ``` componentDidMount: function() { document.onkeydown = function(e) { if (e.altKey && e.shiftKey && e.keyCode === 82) { // ALT+SHIFT+R(eplay) this._replay(); } }.bind(this); }, ``` 最后,我们实现_replay() 方法。它使用setInterval() 方法,每隔一秒钟从记录数组中读取一个state 对象,并传递给setState(): ``` _replay: function() { if (this._log.length === 0) { console.warn('No state to replay yet'); reurn; } var idx = -1; var interval = setInterval(function() { idx++; if (idx === this._log.length - 1) { // 结束 clearInterval(interval); } this.setState(this._log[idx]); }.bind(this), 1000); }, ``` ### 如何改进回放功能 撤销/ 重做的功能如何实现?例如,用户按下ALT+Z 的按键组合时,将state 记录后退一步,按下ALT+SHIFT+Z 时则前进一步。 ### 有另一种实现方法吗 如果不改变setState() 调用,还有没有另一种方法可以实现类似于回放/ 撤销的功能?也许使用一个合适的生命周期方法(参见第2 章)可以帮到你?