useControllableValue

使用场景

1 .组件的状态不仅可以自己管理,也可以被外部控制

    let [values,setValues]=useState({})
//B组件内部的值,但是他的默认值是根据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('发生变化',data);setValue(data)}}/>

2 .里面:每一个小的修改都必须提交.然后传递给外面,外面在拿到传过去的新的值,然后再通过props传下来

//传入的时候必须是这些.props,他取得值是props.value.所以上面传下来的时候必须是value={}这种形式往下传
const [values,setValues]=useControllableValue(props)
//最坑的就是setValues调用之后,只能把值更新到外面的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的操作,只会把新的值发到外面,里面已经生成的值就不变了.
        // 也就是尽管修改一个
    }
    console.log()
    return (
        <div className="header">
           <button onClick={handleChange}>{value.name}</button> 
        </div>
    )