あなたが気づいていないかもしれない反応の詳細のいくつか! （要約）

react のこれらの詳細に気づきましたか?次の記事では、気づいていない可能性のある反応の詳細をいくつかまとめています。一定の参考値があるので、困っている友達が参考になれば幸いです。

[関連チュートリアルの推奨事項: React ビデオ チュートリアル]

React の詳細な知識ポイント:

1. コンポーネントでの get の使用 (クラスのゲッターとして)

ES6 の知識: クラス クラスも独自のゲッターとセッターは次のように記述されます:

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

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

反応コンポーネントでの get の使用法は次のとおりです:

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

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

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

それでは、反応コンポーネントでのゲッターの使用は何でしょうか? ?

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

Vue を理解している場合は、computed: {} の計算プロパティをご存知でしょう。これも下部で getter を使用しますが、オブジェクトの getter はクラスの getter ではありません

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

Vue の計算プロパティの 1 つの利点は次のとおりです:

計算プロパティは関数の実行と比較されます: キャッシュが行われ、計算が削減されます ---> 計算プロパティは、関連する依存関係が変更された場合にのみ再評価されます。 .。

これは、firstName と lastName が変更されていない限り、renderFullName 計算プロパティに複数回アクセスすると、関数を再度実行することなく、前の計算結果がすぐに返されることを意味します。

ということは、React のゲッターにはキャッシュという利点もあるのでしょうか? ? ? 答えは次のとおりです。いいえ、react のゲッターはキャッシュの最適化を行いません。!

2. コンポーネントの属性とイベントの実行シーケンス:

A. 親子コンポーネント: props の形式で、親がそれを渡します。子供へ

B. 同じコンポーネント: 背面が前面を覆います。

上記のルールに基づいて、attr に最大の重みを持たせるには、attr を最も下のコンポーネントに配置し、その位置をできるだけ後ろに配置する必要があります。

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

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

現時点では、Child コンポーネントによって実行される onChange は handleChildChange イベントのみを実行し、handleParentChange イベントは実行されません。 handleParentChange manage のみを実行する必要がある場合はどうすればよいでしょうか? ?

input
• {...this.props} および onChange={this.handleChildChange } 位置を変更します。 #2. 両方のイベントを実行する必要がある場合はどうすればよいでしょうか? ? 子コンポーネント内
HandlechildChange
• this.props.handleParentchange # 3、ES6 形式のメソッド省略形の違い: fn = () => {} と 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>
           );
     }
  }

2 つの書き方があり、関数内での Pointing が異なります。

似ていませんか? ? , 次の 3 つの状況は同じです: ケース 1: これが関数内で使用されていない場合、2 つは同じです。

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

ケース 2: 両方がレンダリングで直接実行される場合。

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

ケース 3: this.fn2.bind(this) を与え、このアクション コンテキストをバインドします。

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

注意: ES6 のオブジェクトのメソッドの省略形と混同しないでください。次はオブジェクト オブジェクトのメソッドの省略形です: Ruan Yifeng ES6: http:/ /es6.ruanyifeng.com/#docs/object

#4. リスト レンダリングの配列

参照: https://doc.react-china.org/docs/lists-and-keys.html

jsx を記述する通常の方法は、ネストされたタグ < を使用して、レンダーで HTML に似た構文を記述することです。 ;p>< input />

、js では { 中括弧 } を使用します。 しかし、配列はタグ

内にネストして通常どおりレンダリングできることに気づいたかどうかはわかりません。

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

上記のように、タグ内の配列が正しく描画できる場合は、次のような書き方があります。

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

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

以上があなたが気づいていないかもしれない反応の詳細のいくつか! （要約）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。