React函数式Hooks-useMemo()用法

useMemo根据条件是否渲染组件

• useMemo与memo区别： menmo在渲染后执行 useMemo渲染中执行，且有返回值
• useMemo只有满足回调的条件，接收定义的变量才会有值，否则都是0，例如count3只有满足count>3,count3才会不是0

不重复执行函数

import React, { Component, useState, useMemo } from 'react'
function UsememoTemplate() {
    const [count, setCount] = useState(0)
    const count2 = useMemo(() => {
        return count * 2;
    }, [count]) //count发生变化才会执行
    return (
        <div>
            <button onClick={() => {
                setCount(count + 1)
            }}>按钮</button>
            {count} ,{count2}
        </div>
    )
}
export default UsememoTemplate

控制子组件何时渲染，以下是点击两次后才会渲染Counter函数

import React, { Component, useState, useMemo, memo } from 'react'
const Counter = memo(function Counter(props) {
    console.log('是否多次执行') //按钮点击两次后才会执行
    return (
        <div>{props.count}</div>
    )
})
function UsememoTemplate2() {
    const [count, setCount] = useState(0)
    const count2 = useMemo(() => {
        return count * 2;
    }, [count]) //count发生变化才会执行
    const count3 = useMemo(() => {
        return count * 2;
    }, [count === 3]) //count满足条件才执行
    console.log(count2, count3) //useMemo只有满足回调的条件 才会有值否则都是0，例如count3只有满足count>3,count3才会不是0
    return (
        <div>
            <button onClick={() => {
                setCount(count + 1)
            }}>按钮</button>
            {count} ,{count2}
            <Counter count={count3} />
        </div>
    )

}
export default UsememoTemplate2

父组件中有函数将会改变判断渲染条件，点击一次也会子组件也会触发是否多次执行语句

import React, { Component, useState, useMemo, memo } from 'react'
const Counter = memo(function Counter(props) {
    console.log('是否多次执行') //按钮点击两次后才会执行
    return (
        <div onClick={props.onClickFuntion}>{props.count}</div>
    )
})
function UsememoTemplate3() {
    const [count, setCount] = useState(0)
    const count2 = useMemo(() => {
        return count * 2;
    }, [count])
    const count3 = useMemo(() => {
        return count * 2;
    }, [count == 3])
    const onClickFuntion = () => {
        console.log('执行')
    }
    return (
        <div>
            <button onClick={() => {
                setCount(count + 1)
            }}>按钮</button>
            {count} ,{count2}
            <Counter count={count3} onClick={onClickFuntion} />

        </div>
    )
}
export default UsememoTemplate3

解决传入方法问题 useMemo 配合useCallback

import React, { Component, useState, useMemo, memo, useCallback } from 'react'

const Counter = memo(function Counter(props) {
    console.log('是否多次执行') //按钮点击两次后才会执行
    return (
        <button onClick={props.onClickFuntion}>{props.count}执行</button>
    )
})

function UsememoTemplate4() {
    const [count, setCount] = useState(0)
    const count2 = useMemo(() => {
        return count * 2;
    }, [count])
    const count3 = useMemo(() => {
        return count * 2;
    }, [count == 3])
    // useMemo返回函数等于useCallback 点击两次后执行
    const onClickFuntion = useCallback(() => {
        console.log('执行')
    }, []);
    return (
        <div>
            <button onClick={() => {
                setCount(count + 1)
            }}>按钮</button>
            {count} ,{count2}
            <Counter count={count3} onClick={onClickFuntion} />

        </div>
    )
}
export default UsememoTemplate4