React学习笔记（4）---react属性与状态

1. 属性的含义和用法

用this.props引用属性

用法：

1》. 键值对式：

    ？可以是{。。。}或字符串“  ”，数组{[...]}, 或变量{val}

2》. 展开对象式：

var props = {

     one:"123",

     two:333

}

3》. 调用setProps式 ; 很少用到

var i =React.render(, document.body);

i.setProps({name:"123"})

实例：

2 . 状态的含义和用法

state : 事物所处的状况，由事物处理，不断变化

状态的用法：

• getInitialState: 初始化每个实例特有的状态
• setState: 更新组件的状态

setState触发的行为：

setState ----》 diff算法-----》变化？更新DOM

在上一个代码中的一段 监听属性是否改变，改变，则在render中更新DOM

handleChange:function(event){
                this.setState({name: event.target.value});
            },

4. 属性和状态对比：

相似点：

• 都是纯JS对象，
• 都会触发render的更新行为
• 都具有确定性

不同点：

....................................................属性 ...........状态

从父组件中获取初始值..................y..................n

由父组件修改................................y..................n

在组件内部设置默认值..................y..................y

在组件内修改................................n..................y

设置子组件的初始值.....................y..................n

修改子组件的值............................y...................n

状态只和自己相关，属性不能从自己修改

区分方法：

组件在运行时需要修改的数据就是状态。

实例

1》项目分析

文章评论框：

step1 : 分析构成项目的组件，

评论框   （父）：   评论对象（属性）

包含内容  （子） ：（状态）

step2: 分析组将的关系及数据传递

step3: 编写代码：

2》编写第一版代码

3》修复bug

视屏来源： www.jikexueyuan.com