react中回调

    <script type="text/babel">
        function App(){
            console.log('--------------APP---------------------');
            // let childEl = React.useRef(null);
            /**
             * 使用useCallback 代替useRef
             * callback ref 的ref值发生变化，会通知组件
             */ 
            let childEl = React.useCallback((node)=>{
                console.log('--------------------use callback---------------------',node);
                if(node !==null){
                    setVal(node.value)
                }
            },[])
            let [val,setVal] = React.useState('')
            const getChild = ()=>{
                console.log(childEl.current.value);
                setVal(childEl.current.value) 
            }

            /**
             * 需求: 监听chilEl当Child中ref变化时候，是否可以通知到App
             * 
             * 问题：当ref对象发生变化时候，useRef是不会通知的。即使使用了监听器也是无效的。。
             * 结论：.current属性发生变更，不会引发重新渲染组件的
             */ 
            // bug
            // React.useEffect(()=>{
            //     console.log(childEl.current.value);
            //     setVal(childEl.current.value)
            // },[childEl])

            return (
                <div>
                    <div>
                       子组件：<Child ref={childEl}></Child>
                    </div>
                    <div>父组件：<h1>{ val }</h1></div>
                    <button onClick={()=>getChild()}>获取子组件dom</button>
                </div>
            )
        } 
        const Child = React.forwardRef((props,ref)=>{
            let [val,setVal] = React.useState('aaaaa');
            let inputRef = React.useRef(null)
            const change = e=>{
                setVal(e.target.value)
            }

            React.useImperativeHandle(
              ref, 
              () => {
               return {
                value:inputRef.current.value,
               }
              },
            )
            return (
               <div>
                 <input type="text" ref={inputRef} value={val} onChange={e=>change(e)} />
                </div>
            )
        })
        let root = ReactDOM.createRoot(document.getElementById('app'));
        root.render(<App /> )

    </script>

 /**
             * 使用useCallback 代替useRef
             * callback ref 的ref值发生变化，会通知组件
             */

    /**
             * 需求: 监听chilEl当Child中ref变化时候，是否可以通知到App
             *
             * 问题：当ref对象发生变化时候，useRef是不会通知的。即使使用了监听器也是无效的。。
             * 结论：.current属性发生变更，不会引发重新渲染组件的
             */