A brief discussion on some summary of React properties and status
- 高洛峰Original
- 2016-12-06 13:11:421406browse
1. Attributes
1. The first method of use: key-value pair
2a55209d8c85f0d89a7279657f4d88e7
49df62249afd1b5109cb1b754f02b01d
51618f8d0443b98689fc62e614159f60
eeb0256660d29d8f9799df27556f1081//Array
783b27803c3cf58f5e79eef5156f57cf //Define a function
2. The second method: the expanded object form of three points
var props = {
one :”123”,
tow :321
}
<ClassNameB {…props} />
Adding three quotation marks is equivalent to getting two attributes (one and two)
3. setProps form: through Components update properties, and properties cannot be modified inside the component, because it will violate the component design principles (avoid as much as possible)
var instance =React.render(<ClassNameC ><ClaasNameC/>,document.body);
instance.setProps({name:”Tom" });
2. Status: the status of things, which are constantly changing and handled by things themselves/private things Attribute
getInitialState: Initialize the unique state of each instance
setState: Update the component state
setState will trigger the diff algorithm: determine the difference between state and page results, whether it needs to be updated
3. Comparison of status and attributes
State and Properties will trigger render updates and are all pure JS objects. Status: It is related to itself and is neither affected by parent components nor child components. Properties: It cannot be modified by itself and can only be obtained from the parent component. Properties, the parent component can also modify its properties
The fundamental difference: what needs to be modified and maintained when the component is running is the state
Four. Get familiar with a simple demo:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>daomul's example</title>
<link rel="stylesheet" href="../shared/css/base.css" />
</head>
<body>
<h1>Text demo</h1>
<div id="container">
</div>
<script src="../shared/thirdparty/es5-shim.min.js"></script>
<script src="../shared/thirdparty/es5-sham.min.js"></script>
<script src="../shared/thirdparty/console-polyfill.js"></script>
<script src="../../build/react.js"></script>
<script src="../../build/JSXTransformer.js"></script>
<script type="text/jsx">
//内容组件
var Content = React.createClass({
getInitialState:function(){
return {
inputText:'',
};
},
handleChange:function(event){
this.setState({inputText:event.target.value});
},
handleClick:function(){
console.log("props name is " + this.props.selectName + " \n and inputText is " + this.state.inputText);
},
render:function(){
return <div>
<textarea onChange = {this.handleChange} placeholder = "please input something!"></textarea>
<button onClick = {this.handleClick}>sumbit</button>
</div>;
},
});
//评论组件
var Comment = React.createClass({
getInitialState:function(){
return {
names:["Tom","Axiba","daomul"],
selectName:'',
};
},
handleSelect:function(){
this.setState(
{selectName : event.target.value}
);
},
render:function(){
var options = [];
//往options中添加子option
for (var option in this.state.names) {
options.push(<option value={this.state.names[option]}> {this.state.names[option]} </option>)
};
return <div>
<Content selectName = {this.state.selectName}>
</Content>
<select onChange = {this.handleSelect}>
{options}
</select>
</div>;
},
});
//start render
React.render(<Comment></Comment>,document.body);
</script>
</body>
</html>