传递函数,父组件重新渲染的时候,并不会让子组件跟着重新渲染;
import { memo, useCallback, useState } from 'react';const Son = memo(function Input({onChange}){console.log('子组件渲染');return (<div><div onClick={()=>onChange(666)}>222</div></div>)
})const App = () => {const [count, setCount] = useState(0);//简单类型const changeInput = useCallback((val) => console.log(val),[]);// 只有父组件更新// const changeInput = (val) => {console.log(val)} //父组件更新,会导致子组件跟着更新console.log('父');return (<div className="home"><Son onChange={changeInput} /><button onClick={() => setCount(count + 1)}>+{count}</button></div>)
}export default App