Eine kurze Diskussion über eine Zusammenfassung der React-Eigenschaften und des Status-PHP开发-php.cn

Eine kurze Diskussion über eine Zusammenfassung der React-Eigenschaften und des Status

高洛峰

Freigeben： 2016-12-06 13:11:42

Original

1335 Leute haben es durchsucht

1. Attribute

Die erste Verwendungsmethode: Schlüssel-Wert-Paar

< ;ClaaNameA name = {Tom} />

//Array

//Eine Funktion definieren

2. Die zweite Methode: Dreipunkt-erweiterte Objektform

var props = {
 
one :”123”,
 
tow :321
 
 }
 
<ClassNameB {…props} />

Nach dem Login kopieren

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" });

Nach dem Login kopieren

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=&#39;Content-type&#39; content=&#39;text/html; charset=utf-8&#39;>
   <title>daomul&#39;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:&#39;&#39;,
      };
     },
     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:&#39;&#39;,
      };
     },
     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>

Nach dem Login kopieren