Eine kurze Diskussion über eine Zusammenfassung der React-Eigenschaften und des Status
- 高洛峰Original
- 2016-12-06 13:11:421378Durchsuche
1. Attribute
Die erste Verwendungsmethode: Schlüssel-Wert-Paar
7f635102ddb8270713bc519eb8de137e
< ;ClaaNameA name = {Tom} />
51618f8d0443b98689fc62e614159f60
ec76ba1a3036723d32ff765a0c41a670//Array
7d04f8d655a94345cdc43db86a1c89de //Eine Funktion definieren
2. Die zweite Methode: Dreipunkt-erweiterte Objektform
var props = {
one :”123”,
tow :321
}
<ClassNameB {…props} />
Das Hinzufügen von drei Anführungszeichen entspricht dem Abrufen von zwei Attributen (eins und zwei)
3. setProps-Formular: Eigenschaften über Komponenten aktualisieren . Eigenschaften können nicht innerhalb der Komponente geändert werden, da dies gegen die Designprinzipien der Komponente verstößt (so viel wie möglich vermeiden)
var instance =React.render(<ClassNameC ><ClaasNameC/>,document.body);
instance.setProps({name:”Tom" });
2. Status: Der Status eines Dings ändert sich ständig und wird vom Ding selbst/privaten Eigenschaften des Dings verwaltet
getInitialState: Initialisiert den für jede Instanz eindeutigen Status
setState: Aktualisiert den Komponentenstatus
setState Löst den Diff-Algorithmus aus: Bestimmen Sie den Unterschied zwischen Status und Seitenergebnissen und ermitteln Sie, ob eine Aktualisierung erforderlich ist
3. Vergleich von Status und Attributen
Sowohl Status als auch Attribute lösen das Rendern aus Aktualisierungen, beides sind reine JS-Objekte
Status: Es ist mit sich selbst verknüpft und wird weder von der übergeordneten Komponente noch von der untergeordneten Komponente beeinflusst.
Attribute: Es kann nicht selbst geändert werden Erhalten Sie nur Attribute von der übergeordneten Komponente, und die übergeordnete Komponente kann auch ihre Eigenschaften ändern
Der grundlegende Unterschied: Was geändert und beibehalten werden muss, wenn die Komponente ausgeführt wird, ist der Status
4. Machen Sie sich mit der einfachen Demo vertraut:
<!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>