useCallback

如果没有这个hook，则当父组件的事件触发时，会触发传递给子组件的的事件，从而会导致子组件全局更新，触发它的函数再次调用

//父组件
import React, { useState} from "react";
import Child from "./Itemtwo.jsx"
const Itemone=()=>{
    const [text,setText]=useState('')
    const changeHandle=(e)=>{
           setText(e.target.value)
    }
    return (
        <div>
            <div>text文本：{text}</div>
            <Child onChange={changeHandle}></Child>
        </div>
    )
}
export default Itemone
//子组件
import React, {memo} from 'react'
const Itemtwo=memo((props)=>{
    const date=new Date()
    return (
        <div>
            {date.toLocaleString()}
            <input type="text" onChange={props.onChange}/>
        </div>
    )
})
export default Itemtwo 
//上面代码中，我们在子组件中修改文本框的值，会触发子组件的onChange，从而触发父组件的changeHandler方法，在父组件中的changeHandler方法中修改了text文本，所以页面上的text值发生了改变。 
//但是除了我们发现页面上text文本改变之外，子组件中的时间也发生了改变 (说明每一次子组件输入内容的时候都会触发子组件的重新渲染)
//原因是每一次子组件输入内容，父组件的text文本发生变化，造成父组件被重新渲染，从而造成父组件传递给子组件的changeHandler方法(props)发生了变化，从而造成子组件的重新渲染

//修改后的父组件
import React,{useState,useCallback} from 'react'
import Child from './Itemtwo';
const Itemthree=(props)=>{
    const [text,setText]=useState('')
    const changeHandle=useCallback(
        (e) => {
           setText(e.target.value)
        },
        []
    )
    return (
    <div>
      <div>text文本为:{text}</div>
      <Child onChange={changeHandle}></Child>
    </div>
  )
}
export default Itemthree