React 中的属性和状态初看之下可以互相替代，但是在 React 的设计哲学中两者有着截然不同的使用方式和使用场景。
属性的含义和用法
props = properties
属性往往是与生俱来、无法自己改变的
第一种使用方式：{this.state.name}
<script type="text/babel">
var HelloWorld = React.createClass({
render: function () {
return <p>Hello,{this.props.name ? this.props.name : "World"}</p>;
} }) var HelloUniverse = createClass({
getInitialState: return {name: ''} handleChange: function (event) {
this.setState({name: event.target.value}) render: function () {
//还有如下的方式设置属性
// <HelloWorld name="字符串"></HelloWorld>
//{}js的表达式
//<HelloWorld name={}></HelloWorld>
数组{[1,2,3]}
return <div>
<HelloWorld name={this.state.name}></HelloWorld>
<br/>
<input type="text" onChange={this.handleChange} />
</div>
} ReactDOM.render(<div><HelloUniverse></HelloUniverse></div>body);
</script>
第二种：{...this.state}
this.props.name1 + ' ' + name2}</ return {
name1: 'Tim' name2: 'John' }name1: event.可以使用下面替换
//<HelloWorld name1='Tim' name2 = 'John'></HelloWorld>
return <div>
<HelloWorld {...this.state}></HelloWorld>
<br/>
<</script>
第三种：setProps 几乎不使用 新版本已移除
状态的含义和用法
state
状态：事物所处的状况
getInitialState：初始化每个实例特有的状态
setState：更新组件状态
this.props.name}</ name: </script>
属性和状态对比
相同点：
都是纯JS对象
都会触发render更新
都具有确定性
比较
区分的方法：
组件在运行时需要修改的数据就是状态。
属性和状态实战
<!DOCTYPE html<html lang="zh-cn" <head>
<Meta charset="UTF-8" <title>文章评论框</title>
<script src="../build/react.js"></script>
"../build/react-dom.js""../build/browser.min.js" </head>
<body>
var Content = getInitialState: inputText: "" } } handleChange: inputText: event. handleSubmit: function () {
console.log("reply To: " + selectName + "\n" + state.inputText) render: return <div>
<textarea this.handleChange} placeholder="please enter something..."></textarea>
<button onClick={this.handleSubmit}>submit</button>
</div> }) var Comment = names: ["Tim""John""Hank"] selectName: '' handleSelect: selectName: event. var options = [] for (var option in this.names) {
options.push(<option value={this.state.names[option]} key={this.state.names[option]}>{names[option]}</option>)
} return <div>
<select this.handleSelect}>
{options}
</select>
<Content selectName={this.state.selectName}></Content>
</div> ReactDOM.render(<Comment></Comment> </script>
</body>
</html>
React 中的属性和状态初看之下可以互相替代，但是在 React 的设计哲学中两者有着截然不同的使用方式和使用场景。
props = properties
属性往往是与生俱来、无法自己改变的
第一种使用方式：{this.state.name}
</script>
第二种：{...this.state}
</script>
第三种：setProps 几乎不使用 新版本已移除
状态的含义和用法
state
状态：事物所处的状况
getInitialState：初始化每个实例特有的状态
setState：更新组件状态
</script>
属性和状态对比
相同点：
都是纯JS对象
都会触发render更新
都具有确定性
比较
区分的方法：
组件在运行时需要修改的数据就是状态。
属性和状态实战
</html>
