赵走x博客
网站访问量:151945
首页
书籍
软件
工具
古诗词
搜索
登录
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
9、在初始化state 时使用props:一种反模式
资源编号:76057
书籍
React快速上手开发
热度:88
在初始化state 时使用props
在前面的一个例子中,我们在getInitialState() 方法中使用了this.props: ``` getInitialState:function(){ return{ text:this.props.text } }, ``` 通常认为这种做法是反模式。理想情况下,你可以在render() 方法中将this.state 和this.props 任意组合,以进行界面构建。但有时候,你想要传递一个值到组件中,用于构造初始状态。这种想法本身没什么不对,但如果组件的调用者以为属性(在之前的例子中是text 属性)总是能保持最新,这种写法就有歧义了。为了符合语境,对命名作一点小改动就足够了。比如,把属性名text 改成defaultText 或者initialValue: ``` propTypes: { defaultValue: React.PropTypes.string }, getInitialState: function() { return { text: this.props.defaultValue, }; }, ``` 第4 章将说明React 如何实现自己的input 和textarea 来解决这个问题。这和人们之前所了解的HTML 知识有一些出入。