0


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

本文转载自: https://blog.csdn.net/u010234868/article/details/126956021
版权归原作者 每一天,每一步 所有, 如有侵权,请联系我们删除。

“React中useMemo的简单使用”的评论:

还没有评论