研究ノート-細かく分割された知識ポイントに反応する

---

以下は、reactの学習プロセス中に遭遇するいくつかの断片と不連続な知識ポイントです。例：vueのテンプレートタグと同様、vueの「計算された属性」の実装方法と同様。

1.vueのテンプレートタグの実装方法と同様です。

Reactでは、コンポーネントの戻りにルートノードは1つしか存在できず、必要なノードはすでに親コンポーネントにあり、子コンポーネントに追加のラベルは追加されません。このとき、ラベルが必要です。子コンポーネントが親コンポーネントにレンダリングされる場合、ラベルがないことと同じです。これを実現するには、次の2つの方法があります。

// 使用空标签包裹子组件
<>
    <div></div>
    <span></span>
</>

// 使用Fragment标签
import React, { Fragment } from 'react';
<Fragment>
    <div></div>
    <span></span>
</Fragment>

2. vueの「計算されたプロパティ」と同様：

計算された属性の性質：関数が呼び出されたときに、指定されたパラメーターが最後の呼び出しと同じである場合、関数は実行されず、最後の結果が直接返されるため、関数の呼び出しが減ります。

Reactで同様の関数を実装するには、関数の結果をキャッシュするためのmemoize-oneというパッケージが必要です。プロジェクトのコマンドウィンドウでダウンロードします。

yarn add memoize-one

使用時の注意：関数に必要なデータは、仮パラメーターを使用した後に関数に渡す必要があります。

import memoize from 'memoize-one';

findAvatar = memoize(activeId => {
    let target   = this.state.listMain.find(item => item.id === activeId);
    return target ? "http://localhost:3000" + target.avatar : "";
});

render() {
    let contextValue = {
        ...this.state,
        changeCategory: this.changeCategory,
        avatar: this.findAvatar(this.state.activeId)
    };
    return (
       <Context.Provider value={ contextValue }>
           <UICategory />
       </Context.Provider>
    );
}

3. vueでのウォッチイベントモニタリングと同様：

Reactには直接のイベント監視はなく、監視イベントの監視はcomponentDidUpdate関数を介して間接的に実装できます。

イベント監視の本質は次のとおりです。データの一部が変更されると、一連の操作が発生します。

componentDidUpdate（）関数では、更新の前後のデータを取得できます。前後のデータを比較し、データが変化した場合は、一連の操作を行います。これにより、ウォッチイベントの監視が間接的に実装されます。

// 模拟vue中的watch监听
componentDidUpdate(prevProps,prevState) {
    if(prevState.a !== this.state.a) {
        console.log("a变量");
    }
}

---

上記はいくつかの比較的小さな知識ポイントであり、主にvueと比較されます。