1:父传子
props
function father(){
//父类传子类
const [num setNum]=useSate(0)
return <Child num={num} setNum={setNum}/>
}
const Child=(props)=>{
console.log(props.name);
//父传子
<button onClick=()=>{props.setNum(2)}><button>
}
context使用
const nameContext=ceateContext()
function grand(){
<nameContext provide>
const [name,setName]=useState('aaa')
<Child value={{name,setName}}/>
</nameContext provide>
}
function Child()=>{
const a= useContext(nameContext)
return(
<h2>{name}</h2>
<button onClick={()=>setName('bbb)}></button>
)
}
memo与useCallback与useMemo的使用
useMemo返回缓存的变量,useCallback返回缓存的函数,都会在组件第一次渲染的时候执行,之后会在其依赖的变量发生改变时再次执行;并且这两个hooks都返回缓存的值
解决问题:父组件每次刷新,子组件都会打印日志
function father(){
//父类传子类
const [num setNum]=useSate(0)
const doThing=useCallback(()=>{setNum+1},[])//使用usecallback父类更改子类不会
const doThing=useMemo(
return ()=>{setNum+1},[]
)
return <button doThing={doThing}><button>
<Child />
}
const Child=memo((props)=>{
console.log(props.name);
//父传子
<button onClick=()=>{props.doThing}><button>
})