hooks

第一次初始化渲染 显示Dom元素渲染 然后从上向下触发副作用执行函数
getProductName触发
name effect 触发
getProductName触发
price effect 触发
getProductName触发

当点击价钱 每次先触发Dom元素渲染再执行 副作用
getProductName触发
price effect 触发

当点击修改名字
getProductName触发
name effect 触发
getProductName触发

使用useMemo 初次渲染 useMemo 执行顺序按照 useMemo从上到下执行顺序执行
useMemo 把普通函数包裹住之后当点击事件就只会根据依赖项执行，但初始化还是会全部执行
name memo 触发
getProductName触发
name effect 触发
getProductName触发
price effect 触发
getProductName触发

点击价钱
price memo 触发
getProductName触发
price effect 触发
点击名字
name memo 触发
getProductName触发
name effect 触发
getProductName触发
当useMemo 传【】 就是依赖与空执行 ,只有初始化执行一次
当useMemo 什么都不传就是只有dom 元素有变化就会执行
useMemo 返回的是一个变量是在Dom 更新前触发的

import React, {Fragment} from 'react'
import { useState, useEffect, useCallback, useMemo } from 'react'
 
 
const nameList = ['apple', 'peer', 'banana', 'lemon']
const Example = (props) => {
    const [price, setPrice] = useState(0)
    const [name, setName] = useState('apple')
    
    
    function getProductName() {
        console.log('getProductName触发')
        return name
    }
    // 只对name响应
    useEffect(() => {
        console.log('name effect 触发')
        getProductName()
    }, [name])
    
    // 只对price响应
    useEffect(() => {
        console.log('price effect 触发')
    }, [price])
	 const memo_name = useMemo(() => {
	      console.log('name memo 触发')
	      return () => name  // 返回一个函数
	  }, [name])
    return (
        <Fragment>
            <p>{name}</p>
            <p>{price}</p>
            <p>{getProductName()}</p>
            <button onClick={() => setPrice(price+1)}>价钱+1</button>
            <button onClick={() => setName(nameList[Math.random() * nameList.length << 0])}>修改名字</button>
        </Fragment>
    )
}
export default Example

每次父组件dom元素渲染 子组件也会重新渲染
memo包裹子组件当初始化dom元素会渲染，当父组件事件执行引起的dom元素渲染不会引起子组件的重新渲染
包裹之后只有当给子组件传的值发生变化才会引起子组件的重新渲染
在子组件不需要父组件的值和函数的情况下，只需要使用memo函数包裹子组件即可。

const Child=({name})=>{
  console.log('子组件')
  return (
    <div>
        子组件
    </div>
  )
}
const ChildMemo= memo(Child)

useCallback 依赖于空返回的是一个回调函数 缓存一下当前函数，不会出现每一次Dom刷新都生成一个新的函数

const Fathername= useCallback(()=>{
      console.log('父组件的方法')
},[])