如果我们希望在父组件对子组件进行一些状态的变更等操作，建议由子组件暴露封装好的方法给父组件，以保证数据和操作的安全性

例如，子组件通过 useImperativeHandle 向父组件有粒度地暴露了 reset 方法，而不是直接把 count 值暴露给父组件，以保证状态的私有化和安全性

// Child.tsx
const Child = forwardRef((_, ref) => {

    const [count, setCount] = useState<number>(0);

    const inc = () => setCount(count + 1);

    useImperativeHandle(ref, () => ({
        reset: () => setCount(0)
    }));

    return (
        <>
            <div>Child Value: {count}</div>
            <button onClick={inc}>add</button>
        </>
    );
});

export default Child;

在父组件中，调用该方法即可

const App: React.FC = () => {
  
  const childRef = useRef<childRefType>();

  const resetChild = () => {
    childRef.current?.reset();
  };

  return (
    <div>
      <Child ref={childRef}></Child>
      <button onClick={resetChild}>inc child value</button>
    </div>
  );
};

export default App;