React 基础笔记(React使用Hooks-usememo)(二十七)

useMemo 要是值不改变就不渲染

基础版本 没有事件给子元素

• 如果需要传递事件给子元素则它还是会重新渲染

• useMemo 它使用法和 useEffect 差不多。但是有一点不一样

• 他是在组件加载之前执行,里面有条件。

• 这个条件不是判断的真还是假,它判断的是是否改变比如真变假,它执行。假变真,他也执行

import React, { useState, useMemo } from 'react'
import SecondComponent from './Second'

function App() {
  const [count, setcount] = useState(0)
  //它使用法和useEffect差不多。但是有一点不一样
  //他是在组件加载之前执行,里面有条件。
  //这个条件不是判断的真还是假,它判断的是是否改变比如真变假,它执行。假变真,他也执行
  const double = useMemo(() => {
    return count * 2
  }, [count === 3])
  return (
    <div>
      <div>
        {count} -- {double}
      </div>
      <button onClick={handleClick}>点击</button>
      <SecondComponent count={double}></SecondComponent>
    </div>
  )
  function handleClick() {
    setcount(count + 1)
  }
}

export default App

• 子组件,这样只有当 double 变化的时候才执行

import React, { memo } from 'react'

const Counter = memo(function SecondCompoent(props) {
  console.log('Counter render')
  return <h1>{props.count}</h1>
})

export default Counter

高级版本 有事件给子元素,不想重新渲染

• 那只有事件里面也加载 useMemo,这样只有满足触发条件它才会渲染,返回一个函数

• 父组件

• 这样的话他就不会渲染了

import React, { useState, useMemo } from 'react'
import SecondComponent from './Second'

function App() {
  const [count, setcount] = useState(0)
  //它使用法和useEffect差不多。但是有一点不一样
  //他是在组件加载之前执行,里面有条件。
  //这个条件不是判断的真还是假,它判断的是是否改变比如真变假,它执行。假变真,他也执行
  const double = useMemo(() => {
    return count * 2
  }, [count === 3])
  const handleClick2 = useMemo(() => {
    return () => {
      console.log('点击渲染')
    }
  }, [])
  return (
    <div>
      <div>
        {count} -- {double}
      </div>
      <button onClick={handleClick}>点击</button>
      <SecondComponent count={double} onClick={handleClick2}></SecondComponent>
    </div>
  )
  function handleClick() {
    setcount(count + 1)
  }
}

export default App

• 子组件

import React, { memo } from 'react'

const Counter = memo(function SecondCompoent(props) {
  console.log('Counter render')
  return <h1>{props.count}</h1>
})

export default Counter

因为在上面 handleClick2 返回的是个函数太繁琐,所以用 useCallback 这样省略返回

• 主要是看父组件

import React, { useState, useMemo, useCallback } from 'react'
import SecondComponent from './Second'

function App() {
  const [count, setcount] = useState(0)
  //它使用法和useEffect差不多。但是有一点不一样
  //他是在组件加载之前执行,里面有条件。
  //这个条件不是判断的真还是假,它判断的是是否改变比如真变假,它执行。假变真,他也执行
  const double = useMemo(() => {
    return count * 2
  }, [count === 3])
  const handleClick2 = useCallback(() => {
    console.log('点击渲染')
  }, [])
  return (
    <div>
      <div>
        {count} -- {double}
      </div>
      <button onClick={handleClick}>点击</button>
      <SecondComponent count={double} onClick={handleClick2}></SecondComponent>
    </div>
  )
  function handleClick() {
    setcount(count + 1)
  }
}

export default App

• 子组件

import React, { memo } from 'react'

const Counter = memo(function SecondCompoent(props) {
  console.log('Counter render')
  return <h1>{props.count}</h1>
})

export default Counter