React Hooks ---useMemo

useMemo

下面咱們經過一個實例，來理解下 useMemo的用法。

• 父組件

function App() {
  const [name, setName] = useState('名稱')
  const [content,setContent] = useState('內容')
  return (
      <>
        <button onClick={() => setName(new Date().getTime())}>name</button>
        <button onClick={() => setContent(new Date().getTime())}>content</button>
        <Button name={name}>{content}</Button>
      </>
  )
}

複製代碼

• 子組件

function Button({ name, children }) {
  function changeName(name) {
    console.log('11')
    return name + '改變name的方法'
  }

  const otherName =  changeName(name)
  return (
      <>
        <div>{otherName}</div>
        <div>{children}</div>
      </>

  )
}
複製代碼

熟悉react的同窗能夠很顯然的看出，當咱們點擊父組件的按鈕的時候，子組件的name和children都會發生變化。

注意咱們打印console.log的方法。

無論咱們是改變name或者content的值，咱們發現 changeName的方法都會被調用。 是否是意味着 咱們原本只想修改content的值，可是因爲name並無發生變化，因此無需執行對應的changeName方法。可是發現他卻執行了。 這是否是就意味着性能的損耗，作了無用功。

下面咱們使用useMemo進行優化

• 優化以後的子組件

function Button({ name, children }) {
  function changeName(name) {
    console.log('11')
    return name + '改變name的方法'
  }

const otherName =  useMemo(()=>changeName(name),[name])
  return (
      <>
        <div>{otherName}</div>
        <div>{children}</div>
      </>

  )
}

export default Button
複製代碼

這個時候咱們點擊 改變content值的按鈕，發現changeName 並無被調用。 可是點擊改變name值按鈕的時候，changeName被調用了。

結語

因此咱們能夠使用useMemo方法，避免無用方法的調用，固然通常咱們changName裏面可能會使用useState來改變state的值，那是否是就避免了組件的二次渲染，達到了優化性能的目的。