React中useMemo的简单使用

useMemo主要用来解决使用React hooks产生的无用渲染的性能问题，用来做缓存用。

useMemo使用场景，比如有两个变量（依赖项），只需要在其中一个变量变化时发生变化，否则拿缓存的值；或者其中另一个变量的变化不需要引起重新计算时使用。该属性类似于vue中的计算属性，有返回值。

useMemo使用：
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>
  )
}