useMemo

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

useMemo 和 useCallback这两个函数的调用形式为：

useCallback(fn, deps) 
useMemo(() => fn, deps)

注：
useMemo函数会返回函数执行后的返回结果。
useCallback函数会直接返回函数fn的引用地址

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>
	)
}