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

时间:2023-03-08 16:06:45
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. 不同点:

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

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