属性和状态详解
属性的含义和用法
属性的含义
props = properties
属性:一个事物的行至与关系
属性往往是与生俱来、无法自己改变的
属性的用法
1、<Hello name=? /> ?可以是字符串、{123}、{"123"}、{[1,2,3]}、{variable}、函数
<script src="./react.js"></script>
<script src="./JSXTransformer.js"></script>
<script src="./jquery-3.1.1.min.js"></script>
<script type="text/jsx">
$(document).ready(
function(){
var Hello = React.createClass({ //注意,首字母必须大写,否则会jsx当作html自带元素
//this.refs.childp.text //不是真正的DOM节点(不能进行操作),而是react展示的DOM
render: function(){
console.log('render,4');
return <p>Hello {this.props.name?this.props.name:"World"}<br/></p>
}
});
var World = React.createClass({
getInitialState:function(){
return {name:'Ray'};
},
handleChange:function(event){
this.setState({name:event.target.value});
},
render:function(){
return <div>
<Hello name={this.state.name}></Hello>
<br/>
<input type="text" onChange={this.handleChange} />
</div>
}
});
var style ={
color:'red',
border:'1px #000 solid'
};
var count = 0;
React.render(<div style={style}><World></World></div>,document.body);
}
);
</script>
2、<Hello{...props}>
var props={
one:"123",
two:321
}
<script src="./react.js"></script>
<script src="./JSXTransformer.js"></script>
<script src="./jquery-3.1.1.min.js"></script>
<script type="text/jsx">
$(document).ready(
function(){
var Hello = React.createClass({ //注意,首字母必须大写,否则会jsx当作html自带元素
//this.refs.childp.text //不是真正的DOM节点(不能进行操作),而是react展示的DOM
render: function(){
console.log('render,4');
return <p>Hello {this.props.name1 + ' ' + this.props.name2}<br/></p>
}
});
var World = React.createClass({
getInitialState:function(){
return {name1:'Tom',
name2:'Jack'
};
},
handleChange:function(event){
this.setState({name:event.target.value});
},
render:function(){
return <div>
<Hello {...this.state}></Hello>
<br/>
<input type="text" onChange={this.handleChange} />
</div>
}
});
var style ={
color:'red',
border:'1px #000 solid'
};
var count = 0;
React.render(<div style={style}><World></World></div>,document.body);
}
);
</script>
3、var instance =React.render(<Hello></Hello>); //一般不用这种方法
instance.setProps({name:"Tim"});
<script src="./react.js"></script>
<script src="./JSXTransformer.js"></script>
<script type="text/jsx">
var Hello = React.createClass({
render: function(){
return <p>Hello {this.props.name || "World"}<br/></p>
}
});
var style ={
color:'red',
border:'1px #000 solid'
};
var instance = React.render(<div style={style}><Hello></Hello></div>,document.body); //此处不能加上style={style}?,去掉之后可以正常set进去
instance.setProps({name:'Ray'});
</script>
状态的含义和用法
状态的含义
state
状态:事物所处的状况
状态是由事物自行处理、不断变化的
状态的用法
getInititalState
初始化每个实例特有的状态
setState:
更新组件状态 会调用diff算法
demo
<script src="./react.js"></script>
<script src="./JSXTransformer.js"></script>
<script type="text/jsx">
var Hello = React.createClass({
render: function(){
return <p>Hello {this.props.name || "World"}<br/></p>
}
});
var style ={
color:'red',
border:'1px #000 solid'
};
var World = React.createClass({
getInitialState:function(){
return {
name:'Ray'
};
},
handleChange:function(event){
this.setState({name:event.target.value});
},
render:function(){
return <div>
<Hello name={this.state.name}></Hello>
<br/>
<input type="text" onChange={this.handleChange} />
</div>
}
});
var instance = React.render(<div style={style}><World></World></div>,document.body);
</script>
属性和状态的对比
属性和状态的相似点
都是纯js对象
都会触发render更新
都具有确定性
属性和状态的大对比
状态之和组建自己相关
组建不能修改属性
区分属性和状态的方法
是否需要运行时修改
状态会在运行时修改
所有的状态都可以变为属性
属性和状态实战
项目分析
编写一个简单的文章评论框
1、分析构成项目的组建
评论框
内容
2、分析组件的关系及数据传递
3、编写代码
第一版代码编写
<script src="./react.js"></script>
<script src="./JSXTransformer.js"></script>
<script type="text/jsx">
var Hello = React.createClass({
getInitialState:function(){
return {
inputText:"" //只会在初始化时调用
}
},
handleChange:function(event){
this.setState({inputText:event.target.value});
},
handleSubmit:function(){
//把需要计算的属性放在调用的方法中,getInitialState只会在初始化的时候调用
console.log("reply To: " + this.props.selectName + "\n" + this.state.inputText);
},
render: function(){
return <div>
<textarea onChange={this.handleChange} placeholder="please enter something..."></textarea>
<button onClick={this.handleSubmit}>submit</button>
</div>
}
});
var Comment = React.createClass({
getInitialState:function(){
return {
names:["Ray","Jack","Tom"],
selectName:''};
},
handleSelect:function(event){
this.setState({selectName:event.target.value});
},
render:function(){
var options =[];
for(var option in this.state.names){
options.push(<option value={this.state.names[option]}>{this.state.names[option]}</option>)
}
return <div>
<select onChange={this.handleSelect}>
{options}
</select>
<Hello selectName={this.state.selectName}></Hello>
</div>
}
});
var instance = React.render(<Comment></Comment>,document.body);
</script>