从一个需求出发，聊聊useRef三兄弟

Copycopy code to clipboard
1class MyComponent extends React.Component {
2  constructor(props) {
3    super(props);
4
5    this.inputRef = React.createRef();
6  }
7
8  render() {
9    return <input type="text" ref={this.inputRef} />;
10  }
11
12  componentDidMount() {
13    this.inputRef.current.focus();
14  }
15}

Copycopy code to clipboard
1function TextInputWithFocusButton() {
2  const inputEl = useRef(null);
3  const onButtonClick = () => {
4    inputEl.current.focus();
5  };
6  return (
7    <>
8      <input ref={inputEl} type="text" />
9      <button onClick={onButtonClick}>Focus the input</button>
10    </>
11  );
12}

Copycopy code to clipboard
1function usePrevious(value) {
2  const ref = useRef();
3  useEffect(() => {
4    ref.current = value;
5  });
6  return ref.current;
7}

Copycopy code to clipboard
1const App: React.FC = () => {
2  const ref = useRef() as MutableRefObject<any>;
3
4  useEffect(() => {
5    ref.current.focus();
6  }, []);
7
8  return (
9    <>
10      <Child ref={ref} />
11    </>
12  );
13};
14
15const Child = forwardRef((props, ref: Ref<any>) => {
16  return <input type="text" name="child" ref={ref} />;
17});

Copycopy code to clipboard
1function useImperativeHandle<T, R extends T>(ref: Ref<T>|undefined, init: () => R, deps?: DependencyList): void;

Copycopy code to clipboard
1onst App: React.FC = () => {
2  const ref = useRef() as MutableRefObject<any>;
3
4  useEffect(() => {
5    ref.current.input.focus();
6  }, []);
7
8  return (
9    <>
10      <Child ref={ref} />
11    </>
12  );
13};
14
15const Child = forwardRef((props, ref: Ref<any>) => {
16  const inputRef1 = useRef() as MutableRefObject<HTMLInputElement>;
17  const inputRef2 = useRef() as MutableRefObject<HTMLInputElement>;
18
19  useImperativeHandle(
20    ref,
21    () => {
22      return {
23        input: inputRef1.current,
24      };
25    },
26    [inputRef1]
27  );
28
29  return (
30    <>
31      <input type="text" name="child1" ref={inputRef1} />
32      <br />
33      <input type="text" name="child2" ref={inputRef2} />
34    </>
35  );
36});

Copycopy code to clipboard
1const App: React.FC = () => {
2  const globalRef = useRef() as MutableRefObject<any>;
3
4  return (
5    <>
6      <button
7        onClick={() => {
8          console.log(globalRef.current.method());
9        }}
10      >
11        Invoke method from Child
12      </button>
13      <Child ref={globalRef} />
14    </>
15  );
16};
17
18const Child = forwardRef((props, ref) => {
19  const innerMethod = () => 'METHOD_FROM_CHILD';
20
21  useImperativeHandle(ref, () => ({
22    method: innerMethod,
23  }));
24
25  return <p>Child</p>;
26});

Copycopy code to clipboard
1import React, {
2  useRef,
3  forwardRef,
4  MutableRefObject,
5  Ref,
6  useImperativeHandle,
7} from 'react';
8
9// 我经常被吐槽艺名多... 我也不想啊quq
10const LIST = ['林不渡', '穹心', '一茶'];
11
12type IInnerFunc = () => string;
13type IGlobalRef = {
14  [key: string]: IInnerFunc;
15};
16
17const App: React.FC = () => {
18  const globalRef = useRef(null) as MutableRefObject<IGlobalRef>;
19
20  const invokeAllMountMethod = () => {
21    const globalObject = globalRef?.current;
22    for (const [, method] of Object.entries(globalObject)) {
23      method();
24    }
25  };
26
27  return (
28    <>
29      <button
30        onClick={() => {
31          invokeAllMountMethod();
32        }}
33      >
34        INVOKE
35      </button>
36      {LIST.map((item, idx) => (
37        <Item label={item} idx={idx} key={item} ref={globalRef} />
38      ))}
39    </>
40  );
41};
42
43const Item: React.FC<{
44  label: string;
45  idx: number;
46  ref: Ref<any>;
47}> = forwardRef(({ label, idx }, ref) => {
48  const innerMethod = () => {
49    console.log(`${label}-${idx}`);
50  };
51
52  useImperativeHandle(ref, () => ({
53    [`method-from-${idx}`]: innerMethod,
54  }));
55
56  return <p>{label}</p>;
57});

Copycopy code to clipboard
1{
2   ...originRef.current,
3   ...convertRefObj,
4};

Copycopy code to clipboard
1import { useImperativeHandle, MutableRefObject, DependencyList } from 'react';
2
3const useMultiImperativeHandle = <T, K extends object>(
4  originRef: MutableRefObject<T>,
5  convertRefObj: K,
6  deps?: DependencyList
7): void =>
8  useImperativeHandle(
9    originRef,
10    () => {
11      return {
12        ...originRef.current,
13        ...convertRefObj,
14      };
15    },
16    deps
17  );
18
19export default useMultiImperativeHandle;

Copycopy code to clipboard
1const Item: React.FC<{
2  label: string;
3  idx: number;
4  ref: Ref<IGlobalRef>;
5}> = forwardRef(({ label, idx }, ref) => {
6  const innerMethod = () => {
7    console.log(`${label}-${idx}`);
8  };
9
10  useMultiImperativeHandle(ref as MutableRefObject<IGlobalRef>, {
11    [`method-from-${idx}`]: innerMethod,
12  });
13
14  return <p>{label}</p>;
15});