UseCallBack 子组件与父组件的数据不联动 手动更新子组件
父组件
import React, { useState } from 'react'
import Child3 from '../components/Child3'
export default function UseCallBack() {
const [num, setnum] = useState(10)
return (
<div>
{num}
<button onClick={() => {
setnum(num + 3)
}}>修改num</button>
<Child3 num={num}></Child3>
</div>
)
}
子组件
引入
import React, { useState, useCallback } from 'react'
import React, { useState, useCallback } from 'react'
export default function Child3({ num }: any) {
const [n, setn] = useState(num)
let fn = useCallback(
() => {
setn(num)
},
[num],
)
return (
<div>
从父组件传过来的
{num}
<div>
不随着父组件的改变而改变{n}
<br />
自己手动更新<button onClick={() => {
fn()
}}>更新</button>
</div>
</div>
)
}