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

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

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

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

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


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 (



);
}

3.类似vue中的watch事件监听：

在react没有直接的事件监听，可以通过componentDidUpdate函数间接的实现watch事件监听。

事件监听的本质是：如果一个数据发生改变，那么就会产生一系列的操作。

在componentDidUpdate()函数中，可以获取更新前的数据和更新后的数据。通过前后数据对比，如果数据发生改变，就执行一系列操作。这样就间接实现了watch事件监听。

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

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