react学习—Memo Hook

一、Memo Hook

用于保持一些比较稳定的数据，通常用于性能优化

如果React元素本身的引用没有发生变化，一定不会重新渲染

例：

import React, { useState, useCallback } from 'react'
function Item(props) {
	return <li>{props.value}</li>
}
export default function App() {
	const [range,] = useState({ min: 1, max: 10000 })
	const [n, setN] = useState(0)
	const list = [];
	for (let i = range.min; i <= range.max; i++) {
		list.push(<Item key={i} value={i}></Item>)
	}
	return (
		<div>
			<ul>
				{list}
			</ul>
			<input type="number"
				value={n}
				onChange={e => {
					setN(parseInt(e.target.value))
				}}
			/>
		</div>
	)
}

如上代码，假设有一个较为耗时的处理函数，如果我们每次触发重新渲染，那么将会及其影响性能。所以我们需要一个辅助函数Memo，对其结果进行缓存，除非依赖发生改变，否知直接使用其结果（类似vue的computed）

import React, { useState, useMemo } from 'react'

function Item(props) {
	return <li>{props.value}</li>
}
export default function App() {
	const [range,] = useState({ min: 1, max: 10000 })
	const [n, setN] = useState(0)
	const list = useMemo(() => {
		const list = [];
		for (let i = range.min; i <= range.max; i++) {
			list.push(<Item key={i} value={i}></Item>)
		}
		return list;
	}, [range.min, range.max])
	return (
		<div>
			<ul>
				{list}
			</ul>
			<input type="number"
				value={n}
				onChange={e => {
					setN(parseInt(e.target.value))
				}}
			/>
		</div>
	)
}

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！