Einige Details der Reaktion, die Ihnen vielleicht noch nicht aufgefallen sind! (Zusammenfassen)

Sind Ihnen diese Details schon einmal in der Reaktion aufgefallen? Der folgende Artikel fasst einige Details von React zusammen, die Ihnen möglicherweise nicht aufgefallen sind. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

[Verwandte Tutorial-Empfehlungen: React-Video-Tutorial]

Einige detaillierte Wissenspunkte in React:

1. Die Verwendung von Get-In-Komponenten (als Getter für Klassen)

ES6-Wissen: Klassenklassen haben auch ihre eigenen Getter und Setter, die wie folgt geschrieben sind:

Class Component {
     constructor() {
         super()
         this.name = ''
    }    
    
    // name的getter
    get name() {
        ...
    }

    // name的setter
    set name(value) {
        ...
   }
}

Die Verwendung von get in Reaktionskomponenten ist wie folgt:

/*
 *  renderFullName的getter 
 *  可以直接在render中使用this.renderFullName
 */ 

get renderFullName () {
  return `${this.props.firstName} ${this.props.lastName}`;
}

render() {
    return (
          <div>{this.renderFullName}</div>
    )   
}

Was ist also die Verwendung von Gettern in Reaktionskomponenten? ?

constructor (props) {
    super()
    this.state = {};
  }

    
  render () {
    // 常规写法，在render中直接计算 
    var fullName = `${this.props.firstName} ${this.props.lastName}`;

    return (
      <div>
        <h2>{fullName}</h2>
      </div>
    );
  }

// 较为优雅的写法:，减少render函数的臃肿
renderFullName () {
  return `${this.props.firstName} ${this.props.lastName}`;
}

render () {
  var fullName = this.renderFullName() 　 <div>{ fullName }</div> }

// 推荐的做法：通过getter而不是函数形式，减少变量
get renderFullName () {
  return `${this.props.firstName} ${this.props.lastName}`;
}

render () {
   <div>{ this.renderFullName  }</div> 
}

Wenn Sie Vue kennen, dann kennen Sie die berechnete Eigenschaft berechnet: {}, die unten auch Getter verwendet, aber der Getter des Objekts ist nicht der Getter der Klasse

// 计算属性，计算renderFullName
computed: {
    renderFullName: () => {
         return `${this.firstName} ${this.lastName}`;
    }
}

Vues berechnete Eigenschaft hat einen Vorteil:

Berechnete Eigenschaften versus Funktionsausführung: Zur Reduzierung der Berechnungen wird es eine Zwischenspeicherung geben ---> Berechnete Eigenschaften werden nur dann neu ausgewertet, wenn sich ihre zugehörigen Abhängigkeiten ändern.

Das bedeutet, dass mehrere Zugriffe auf die berechnete Eigenschaft „renderFullName“ sofort das vorherige Berechnungsergebnis zurückgeben, ohne dass die Funktion erneut ausgeführt werden muss, solange sich „firstName“ und „lastName“ nicht geändert haben.

Hat der Getter von React also auch den Vorteil des Cachings? ? ? Die Antwort lautet: Nein, der Getter in React führt keine Caching-Optimierung durch!

2. Komponentenattr und Ereignisausführungssequenz:

A. Eltern-Kind-Komponenten: In Form von Requisiten gibt das Elternteil es an das Kind weiter

B. Dieselbe Komponente: Die Rückseite bedeckt die Vorderseite .

Damit attr auf der Grundlage der oben genannten Regeln das höchste Gewicht hat, sollte es in der untersten Komponente platziert werden und die Position sollte so weit hinten wie möglich liegen.

<-- 父组件Parent | 调用子组件并传递onChange属性 -->
<div>
    <Child  onChange={this.handleParentChange} />
</div>

<-- 子组件Child | 接收父组件onChange， 自己也有onChange属性 -->
<input {...this.props} onChange={this.handleChildChange}  />

Zu diesem Zeitpunkt führt der von der Child-Komponente ausgeführte onChange nur das handleChildChange-Ereignis aus und das handleParentChange-Ereignis wird nicht ausgeführt.

• 1 Was ist, wenn Sie nur handleParentChange ausführen müssen? ? In der Eingabe {...this.props} und onChange={this.handleChildChange} Position ändern.
• 2. Was ist, wenn beide Ereignisse ausgeführt werden müssen? ?组 Führen Sie This.props.handleParentchange

3 in der Form von ES6 in der childlechildChange

in der untergeordneten Komponente aus. ) {} Der Unterschied:

export default Class Child extends Component {
    constructor (props) {
        super()
        this.state = {};
   }

    // 写法1，这是ES6的类的方法写法
    fn1() {
         console.log(this)
        // 输出 undefined
    }
 
    // 写法2，这是react的方法写法
    fn2 = () => {
         console.log(this)
         // 输出：Child {props: {…}, context: {…}, refs: {…}, …}
    }

   render () {
        return (
          <div>
               <button onClick={this.fn1}>fn1方法执行</button >
               <button onClick={this.fn2}>fn2方法执行</button >
          </div>
         );
   }
}

kann in zwei Schreibweisen gesehen werden: und dieser Punkt in der Funktion ist anders.

Dann haben sie nichts gemeinsam? ? , Die folgenden drei Situationen sind gleich:

Fall 1: Wenn dies nicht innerhalb der Funktion verwendet wird, sind die beiden gleich.

// 写法1，这是ES6的类的方法写法
    fn1() {
        return 1 + 1
    }
 
    // 写法2，这是react的方法写法
    fn2 = () => {
         return 1 + 1
    }

Fall 2: Wenn beide direkt im Render ausgeführt werden.

// 写法1，这是ES6的类的方法写法
    fn1() {
         console.log(this)
        // Child {props: {…}, context: {…}, refs: {…}, …}
    }
 
    // 写法2，这是react的方法写法
    fn2 = () => {
         console.log(this)
         // 输出：Child {props: {…}, context: {…}, refs: {…}, …}
    }

   render () {
        return (
          <div>
               <button onClick={() => {
                        this.fn1();
                }}>fn1方法执行</button >

               <button onClick={() => {
                        this.fn2();
                }}>fn2方法执行</button >
          </div>
         );
   }

Fall 3: Geben Sie this.fn2.bind(this) an, binden Sie diesen Aktionskontext.

// 写法1，这是ES6的类的方法写法
    fn1() {
         console.log(this)
        // Child {props: {…}, context: {…}, refs: {…}, …}
    }
 
    // 写法2，这是react的方法写法
    fn2 = () => {
         console.log(this)
         // 输出：Child {props: {…}, context: {…}, refs: {…}, …}
    }

   render () {
        return (
          <div>
               <button onClick={this.fn1}>fn1方法执行</button >

               <button onClick={this.fn2.bind(this)}>fn2方法执行</button >
          </div>
         );
   }

Bitte nicht mit der Methodenabkürzung von Objekt in ES6 verwechseln. Das Folgende ist die Methodenabkürzung von Objekt Objekt:

阮一峰ES6: http://es6.ruanyifeng.com/#docs/object

4. Array im Listen-RenderingReferenz: https://doc.react-china.org/docs/lists-and-keys.html

Die normale JSX-Schreibmethode ist das Schreiben So etwas in der Render-HTML-Syntax, verschachtelte Tags

, wenn es js gibt, verwenden Sie { geschweifte Klammern }.

Aber ich weiß nicht, ob Ihnen aufgefallen ist, dass

Arrays in Tags verschachtelt werden können und normal gerendert werden können.

function NumberList(props) {
    const numbers = [1,2,3,4,5];

    // listItems是数组numbers通过map返回的，本质也是个数组。 
    const listItems = numbers.map((number) =>
        <li>{number}</li>
    );

    return (
        <ul>
             // 可以替换成 [ <li>1</li>,  <li>2</li>,  .....]
             {listItems}
        </ul>
    );
}

Wie oben gezeigt, kann das Array innerhalb des Tags korrekt gerendert werden, dann gibt es die folgende Schreibmethode:

renderItem(name) {
    const A = <li key={&#39;a&#39;}>A</li>, 
             B = <li key={&#39;b&#39;}>B</li>, 
             C = <li key={&#39;c&#39;}>C</li>, 
             D = <li key={&#39;d&#39;}>D</li>;
     let operationList;

     switch (name) {
        case 1:
            operationList = [A , B,  C]
           break;
        case 2:
            operationList = [B,  C, D]
            break;
        case 0:
           operationList = [A]
           break;
    }
    return operationList;
}

render() {
　　 // this.renderItem() 执行结果是数组
    return (
         <ul>{  this.renderItem() }</ul>
    )
}

更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt vonEinige Details der Reaktion, die Ihnen vielleicht noch nicht aufgefallen sind! (Zusammenfassen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!