学习笔记——react细碎知识点

缺乏、安全感 2022-12-19 00:58 129阅读 0赞

--------------------

> 以下是react学习过程中，遇到的一些细碎，不连续的知识点。例如：类似vue中的template标签，类似vue中的“计算属性”如何实现。

### 1.类似vue中的template标签如何实现： ###

> 在react中，在组件的return中只能有一个根节点，在父组件中已有要求的节点，子组件中不想添加多余的标签。这时，就需要一个标签，在子组件渲染到父组件时，相当于没有。有两种实现方法：

// 使用空标签包裹子组件
    <>
        <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中的watch事件监听： ###

> 在react没有直接的事件监听，可以通过componentDidUpdate函数间接的实现watch事件监听。
> 
> 事件监听的本质是：如果一个数据发生改变，那么就会产生一系列的操作。
> 
> 在componentDidUpdate()函数中，可以获取更新前的数据和更新后的数据。通过前后数据对比，如果数据发生改变，就执行一系列操作。这样就间接实现了watch事件监听。

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

--------------------

> 以上就是一些比较小的知识点，主要还是和vue对比学习。