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

---

以下是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对比学习。