关于react.js:React讲解-父组件调用子组件内容更新中

前言

本篇文章属于 React 通信 > 父子通信 > 父组件调用子组件 的内容。
父组件调用子组件的场景：

• 子组件被多个中央应用，须要独自封装
• 子组件逻辑较重，应用齐全受控模式老本较高

应用父组件调用子组件进行逻辑调用有以下劣势：

• 子组件能够封装，进行复用。并且外面的逻辑不受外界烦扰
• 能够把更多相干逻辑封装在子组件里，而不须要传递 props
• 收集数据简略

注释

Class Component

Hooks

应用到的 hooks：useImperativeHandle 和 useRef

/* child 子组件 */
// https://reactjs.org/docs/hooks-reference.html#useimperativehandle
import {useState, useImperativeHandle} from 'react';
...
// props 子组件中须要承受 ref
const ChildComp = ({cRef}) => {const [val, setVal] = useState();
    // 此处留神 useImperativeHandle 办法的的第一个参数是指标元素的 ref 援用
    useImperativeHandle(cRef, () => ({
        // changeVal 就是裸露给父组件的办法
        changeVal: (newVal) => {setVal(newVal);
        }
    }));
    ...
    return (<div>{val}</div>
    )
}

/* FComp 父组件 */
import {useRef} from 'react;
...
const FComp = () => {const childRef = useRef();
    const updateChildState = () => {
        // changeVal 就是子组件裸露给父组件的办法
        childRef.current.changeVal(99);
    }
    ...
    return (
        <>
            {/* 此处留神须要将 childRef 通过 props 属性从父组件中传给本人 cRef={childRef} */}
            <ChildComp  cRef={childRef} />
            <button onClick={updateChildState}> 触发子组件办法 </button>
        </>
    )
}
  

办法二、参考 react 官网文档：

import {useState, useImperativeHandle,forwardRef} from 'react';
// props 子组件中须要承受 ref
let ChildComp = (props,ref) => {
    // 此处留神 useImperativeHandle 办法的的第一个参数是指标元素的 ref 援用
    useImperativeHandle(ref, () => ({
        // changeVal 就是裸露给父组件的办法
        changeVal: (newVal) => {}}));
    return (<div>{val}</div>
    )
}
ChildComp = forwardRef(ChildComp)

/* FComp 父组件 */
import {useRef} from 'react';
const FComp = () => {const childRef = useRef();
    const updateChildState = () => {
        // changeVal 就是子组件裸露给父组件的办法
        childRef.current.changeVal(99);
    }
    return (
        <>
            <ChildComp ref={childRef} />
            <button onClick={updateChildState}> 触发子组件办法 </button>
        </>
    )
}

总结

todo:

• ref vs fowardRef
• 受控与非受控