useImperativeHandle、useLayoutEffect、useDebugValue を使用する場合 質問する

この回答の冒頭で、これらのフックはほとんど使用されないことを述べさせてください。99% の場合、これらは必要ありません。これらは、まれなコーナーケースのシナリオをカバーすることのみを目的としています。

useImperativeHandle

通常、 を使用すると、useRefがアタッチされているコンポーネントのインスタンス値が与えられますref。これにより、DOM 要素を直接操作できるようになります。

useImperativeHandle非常に似ていますが、次の 2 つのことが可能になります。

1. これにより、返される値を制御できます。インスタンス要素を返す代わりに、戻り値が何であるかを明示的に指定します (以下のスニペットを参照)。
2. blurネイティブ関数 ( 、など) を独自の関数に置き換えることができるfocusため、通常の動作に副作用が生じたり、まったく異なる動作が発生したりする可能性があります。ただし、関数は好きなように呼び出すことができます。

上記のいずれかを実行したい理由は多数考えられます。ネイティブ プロパティを親に公開したくない場合や、ネイティブ関数の動作を変更したい場合などです。理由は多数考えられます。ただし、はuseImperativeHandleほとんど使用されません。

useImperativeHandle使用時に親コンポーネントに公開されるインスタンス値をカスタマイズします。ref

例

この例では、 から取得する値には、で宣言したref関数のみが含まれます。他のプロパティは含まれません (bluruseImperativeHandleこれを実証するために値を記録しています）。関数自体も、通常予想される動作とは異なる動作をするように「カスタマイズ」されています。ここでは、 が呼び出されたdocument.titleときに入力を設定してぼかしますblur。

const MyInput = React.forwardRef((props, ref) => {
  const [val, setVal] = React.useState('');
  const inputRef = React.useRef();

  React.useImperativeHandle(ref, () => ({
    blur: () => {
      document.title = val;
      inputRef.current.blur();
    }
  }));

  return (
    <input
      ref={inputRef}
      val={val}
      onChange={e => setVal(e.target.value)}
      {...props}
    />
  );
});

const App = () => {
  const ref = React.useRef(null);
  const onBlur = () => {
    console.log(ref.current); // Only contains one property!
    ref.current.blur();
  };

  return <MyInput ref={ref} onBlur={onBlur} />;
};

ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>

const Message = ({boxRef, children}) => {
  const msgRef = React.useRef(null);
  React.useEffect(() => {
    const rect = boxRef.current.getBoundingClientRect();
    msgRef.current.style.top = `${rect.height + rect.top}px`;
  }, []);

  return <span ref={msgRef} className="msg">{children}</span>;
};

const App = () => {
  const [show, setShow] = React.useState(false);
  const boxRef = React.useRef(null);

  return (
    <div>
      <div ref={boxRef} className="box" onClick={() => setShow(prev => !prev)}>Click me</div>
      {show && <Message boxRef={boxRef}>Foo bar baz</Message>}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("app"));

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  background: green;
  color: white;
}

.msg {
  position: relative;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>

const Message = ({boxRef, children}) => {
  const msgRef = React.useRef(null);
  React.useLayoutEffect(() => {
    const rect = boxRef.current.getBoundingClientRect();
    msgRef.current.style.top = `${rect.height + rect.top}px`;
  }, []);

  return <span ref={msgRef} className="msg">{children}</span>;
};

const App = () => {
  const [show, setShow] = React.useState(false);
  const boxRef = React.useRef(null);

  return (
    <div>
      <div ref={boxRef} className="box" onClick={() => setShow(prev => !prev)}>Click me</div>
      {show && <Message boxRef={boxRef}>Foo bar baz</Message>}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("app"));

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  background: green;
  color: white;
}

.msg {
  position: relative;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>