使用場景
1 .組件的狀態(tài)不僅可以自己管理,也可以被外部控制
let [values,setValues]=useState({})
//B組件內(nèi)部的值,但是他的默認值是根據(jù)props傳下來決定的
let [id,setID]=useState()
const previous=usePrevious(values)
useDebounce(values, { wait: 500 });
useEffect(()=>{
if(props.rightObject.status==='ok'){
setValues(props.rightObject.data)
setID(props.rightObject.id)
}
},[props.rightObject])
// 依賴有不是這個的
坑
1 .外面
const [value,setValue]=useState({name:'123'})
<Test value={value} onChange={(data)=>{console.log('發(fā)生變化',data);setValue(data)}}/>
2 .里面:每一個小的修改都必須提交.然后傳遞給外面,外面在拿到傳過去的新的值,然后再通過props傳下來
//傳入的時候必須是這些.props,他取得值是props.value.所以上面?zhèn)飨聛淼臅r候必須是value={}這種形式往下傳
const [values,setValues]=useControllableValue(props)
//最坑的就是setValues調(diào)用之后,只能把值更新到外面的value,里面的value永遠只拿到上面props傳下來的值,不會改到本地的值
const [value,setValue]=useControllableValue(props)
function handleChange(){
console.log('click')
value.name='234'
console.log(value)
setValue(Object.assign({},{name:"234"}))
//這種set的操作,只會把新的值發(fā)到外面,里面已經(jīng)生成的值就不變了.
// 也就是盡管修改一個
}
console.log()
return (
<div className="header">
<button onClick={handleChange}>{value.name}</button>
</div>
)
