react.js 从零开始（四）React 属性和状态详解

属性的含义和用法：

1、属性的含义。

　　props=properties

　　属性：一个事物的性质和关系。

　　属性往往与生俱来，不可以修改。

2. 属性的用法。

<Helloworld name=??? />

　这个name 可以是 变量 ，对象，数组，函数表达式的值。　

var props={
a:1,
b:2
 }
<Helloworld {...props} />

这样react就会自动遍历props对象并添加到属性中去。

状态的含义和用法：

1.状态的含义。

　　state

　　状态：事物所处的环境。

　　状态是由事物自行处理，不断的发生变化。

　　getInitialState：初始化实例是特有的状态。

　　setState：改变组件的状态。

2，状态的用法

　　

var MessageBox = React.createClass({
  getInitialState: function() {
    return {nameWithQualifier: 'Mr.bbb'};
  },

  render: function() {
    return <div>{this.state.nameWithQualifier}</div>;
  }
});

var dom=React.render(<MessageBox />, mountNode);

dom.setState({

nameWithQualifier:"223"

});

首先可以在初始化的时候给状态赋值。

接着可以通过：

setState来改变状态。
状态改变以后就会触发render函数。重新渲染视图。。

　　

属性和状态对比：

1.相似点：

　　都是js对象。

　　都会触发render 更新。

　　都具备确定性。

2. 不同点：

　　

总结：总之，学习到现在挺顺利的。下一节继续加油吧。。大家下节见。