解决的问题

1.React hooks产生的无用渲染的性能问题，用useMemo来做缓存

2.支持多个useState链式调用，一个变量的改变，带动另一个变量发生改变，类似vue的compute

区别

useState 主动让一个state变量改变，带动组件涉及到的部分渲染，但是无法实现多个useState链式调用。

useEffect，一个state变量的改变，带动组件整体渲染。

怎么用

下面的例子，当input发生改变，根据input的改变值，取匹配多个值并且返回。

useMemo(fn, arr)第一个参数为函数。第二个参数为依赖项，并且其值发生改变，才会多次执行执行，否则只执行一次，如果为空数组[]，fn只执行一次。

import React, {useState, useMemo} from 'react'
export default function UseMemoTest() {
  const [text, setText] = useState('')
  const [data, setData] = useState([
    {id: 1, name: 'test1111'},
    {id: 2, name: 'test222'},
    {id: 3, name: 'test334'},
    {id: 4, name: 'test444'},
  ])
  const handleChange = (e) => {
    setText(e.target.value);
  }
  const getList = useMemo(() => {
    return data.filter(item => {
      if(item.name.includes(text)) {
        return item
      }
    });
  }, [text]);
  return (
    <div style={{marginTop: 20}}>
      <input type="text" onChange={(e) => handleChange(e)}/>
      {
        getList.map(item => <div key={item.id}>{item.name}</div>)
      }      
    </div>
  )
}

坑