Notas de estudio: reacciona puntos de conocimiento finamente divididos

---

Los siguientes son algunos fragmentos y puntos de conocimiento discontinuos encontrados durante el proceso de aprendizaje de reaccionar. Por ejemplo: similar a la etiqueta de plantilla en vue, similar a cómo se implementan los "atributos calculados" en vue.

1. Similar a cómo se implementa la etiqueta de plantilla en vue:

En React, solo puede haber un nodo raíz en la devolución del componente, el nodo requerido ya está en el componente principal y no se agrega ninguna etiqueta adicional al componente secundario. En este momento, se necesita una etiqueta.Cuando el componente secundario se representa en el componente principal, es equivalente a no tenerlo. Hay dos formas de lograrlo:

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

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

2. Similar a "propiedades calculadas" en vue:

La naturaleza del atributo calculado: cuando se llama a una función, si los parámetros proporcionados son los mismos que en la última llamada, la función no se ejecutará y el último resultado se devolverá directamente, reduciendo así la llamada de la función.

Para implementar funciones similares en React, necesita un paquete: memoize-one para almacenar en caché los resultados de la función. Descarga en la ventana de comandos del proyecto.

yarn add memoize-one

Nota al usar: Los datos requeridos por la función deben pasarse a la función después de usar los parámetros formales.

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. Similar a ver el monitoreo de eventos en vue:

No hay monitoreo de eventos directo en React, y el monitoreo de eventos de vigilancia se puede implementar indirectamente a través de la función componentDidUpdate.

La esencia del monitoreo de eventos es: si un dato cambia, ocurrirá una serie de operaciones.

En la función componentDidUpdate (), puede obtener los datos antes y después de la actualización. Comparando los datos antes y después, si los datos cambian, realice una serie de operaciones. Esto implementa indirectamente la supervisión de eventos de vigilancia.

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

---

Los anteriores son algunos puntos de conocimiento relativamente pequeños, que se comparan principalmente con vue.