Quelques détails de réaction que vous n'avez peut-être pas remarqués ! (Résumer)

Avez-vous déjà remarqué ces détails en réaction ? L'article suivant résume certains détails de React que vous n'avez peut-être pas remarqués. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

[Recommandations de didacticiel associées : Tutoriel vidéo React]

Quelques points de connaissances détaillés dans React :

1. L'utilisation des composants get in (comme getter pour les classes)

Connaissances ES6 : les classes de classe également avoir leur propre Le getter et le setter s'écrivent comme suit :

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

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

L'utilisation de get dans le composant React est la suivante :

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

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

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

Alors quelle est l'utilisation du getter dans le composant React ? ?

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> 
}

Si vous connaissez Vue, alors vous connaissez la propriété calculée : {} Sa couche inférieure utilise également le getter, mais le getter de l'objet n'est pas le getter de la classe

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

L'un des avantages du calcul de Vue est :

Propriétés calculées par rapport à l'exécution de fonctions : il y aura une mise en cache, réduisant ainsi les calculs ---> Les propriétés calculées ne seront réévaluées que lorsque leurs dépendances associées changeront . .

Cela signifie que tant que firstName et lastName n'ont pas changé, accéder plusieurs fois à la propriété calculée renderFullName renverra immédiatement le résultat du calcul précédent sans avoir à réexécuter la fonction.

Alors, le getter de React a-t-il également l'avantage de la mise en cache ? ? ? La réponse est : Non, le getter en réaction ne fait pas d'optimisation de la mise en cache !

2. Séquence d'exécution d'attr et d'événement du composant :

A. Composants parent-enfant : sous forme d'accessoires, le parent le transmet à l'enfant

B. Le même composant : le dos recouvre le devant.

En vous basant sur les règles ci-dessus, afin que l'attr ait le poids le plus élevé, il doit être placé dans le composant le plus bas et la position doit être aussi loin que possible.

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

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

À ce stade, le onChange exécuté par le composant Child exécute uniquement l'événement handleChildChange et l'événement handleParentChange ne sera pas exécuté.

• 1. Que se passe-t-il si vous avez uniquement besoin d'exécuter handleParentChange manage ? ? En entrée {...this.props} et onChange={this.handleChildChange > Changer de position.
• 2. Que se passe-t-il si les deux événements doivent être exécutés ? ? Dans le composant enfant HandlechildChange Exécuter this.props.handleParentchange La différence entre l'abréviation de méthode sous la forme ES6 : fn = () => {} et fn() {} :

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

Il y a deux façons d'écrire cela, à l'intérieur de la fonction Le pointage est différent. Alors ils n'ont rien en commun ? ? , Les trois situations suivantes sont identiques :

Cas 1 : Lorsque this n'est pas utilisé à l'intérieur de la fonction, les deux sont égaux.

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

Cas 2 : Lorsque les deux sont exécutés directement dans le rendu.

// 写法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>
         );
   }

Cas 3 : Donnez this.fn2.bind(this), liez ce contexte d'action.

// 写法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>
         );
   }

Remarque, ne le confondez pas avec l'abréviation de méthode de l'objet dans ES6. Voici l'abréviation de méthode de l'objet Objet :

Ruan Yifeng ES6 : http:/. /es6.ruanyifeng.com/#docs/object

4. Référence : https://doc.react-china.org/docs/lists-and-keys.html

La manière normale d'écrire jsx est d'écrire une syntaxe similaire au HTML dans le rendu, avec des balises imbriquées dans des balises

< input />

, avec js, utilisez { accolades }.

Mais je ne sais pas si vous avez remarqué que les tableaux peuvent être imbriqués dans les balises et s'afficher normalement.

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

Comme indiqué ci-dessus, le tableau à l'intérieur de la balise peut être rendu correctement, il existe alors la méthode d'écriture suivante :

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!