赵走x博客
网站访问量:151951
首页
书籍
软件
工具
古诗词
搜索
登录
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
5、组件的state
资源编号:76053
书籍
React快速上手开发
热度:79
React 有一个称为state 的概念,也就是组件渲染自身时用到的数据。当state 发生改变时,React 会自动重建用户界面。
到目前为止,我们的例子都是纯静态的(或者说是“无状态”的),旨在给你一种使用组件块组合界面的思路。不过React 真正的闪光点出现在应用数据发生改变的时候(也是传统的浏览器DOM 操作和维护变得复杂的地方)。 React 有一个称为state 的概念,也就是组件渲染自身时用到的数据。当state 发生改变时,React 会自动重建用户界面。 因此,当你(在render() 方法中)初始化构造界面后,只需要关心数据的变化即可。你完全不需要再关心界面变化了。毕竟,你的render() 方法已经提供了组件的蓝图。 调用setState() 后的界面更新是通过一个队列机制高效地进行批量修改的,直接改变this.state 会导致意外行为的发生,因此你不应该这么做。和前面的this.props 类似,可以把this.state 当作只读属性;否则,不仅仅在语义上不够直观,还会导致不可预料的结果。类似地,永远不要自行调用this.render() 方法——而是将其留给React 进行批处理,计算最小的变化数量,并在合适的时机调用render()。 和this.props 的取值方式类似, 你可以通过this.state 对象取得state。在更新state时,可以使用this.setState() 方法。当this.setState() 被调用时,React 会调用你的render() 方法并更新界面。 当setState() 被调用时,React 会更新界面。这是最为常见的情形, 但你在随后的学习中会了解到一种例外情况。可以通过令一个名为shouldComponentUpdate() 的特殊“生命周期”方法返回false,从而避免界面更新。