React：將重點放在 componentDidMount 上，如何使用鈎子來實現？

Question

在 React 中，我可以使用類在組件加載時將焦點設置為輸入，如下所示：

class Foo extends React.Component {
    txt1 = null;

    componentDidMount() {
        this.txt1.focus();
    }

    render() {
        return (
            <input type="text"
                ref={e => this.txt1 = e}/>
        );
    }
}

我正在嘗試使用新的hooks 提案重寫此組件。

我想我應該使用useEffect而不是componentDidMount ，但是如何重寫焦點邏輯？

Answer 1

您可以使用useRef鈎子創建一個ref，然后將它集中在一個useEffect鈎子中，並將一個空數組作為第二個參數，以確保它只在初始渲染后運行。

 const { useRef, useEffect } = React; function Foo() { const txt1 = useRef(null); useEffect(() => { txt1.current.focus(); }, []); return <input type="text" ref={txt1} />; } ReactDOM.render(<Foo />, document.getElementById("root")); 

 <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.production.min.js"></script> <div id="root"></div> 

Answer 2

根據官方文檔： https : useRef你可以使用useRef 。

useRef返回一個可變的 ref 對象，其.current屬性被初始化為傳遞的參數（ initialValue ）。 返回的對象將在組件的整個生命周期內持續存在。

一個常見的用例是命令式訪問孩子：

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

本質上， useRef就像一個“盒子”，可以在其.current屬性中保存可變值。

您可能熟悉 refs 主要是作為訪問 DOM 的一種方式。 如果您使用<div ref={myRef} />將 ref 對象傳遞給 React，則每當該節點發生更改時，React 都會將其.current屬性設置為相應的 DOM 節點。

但是， useRef()不僅對ref屬性有用。 保持任何可變值類似於在類中使用實例字段的方式，這很方便。

這是有效的，因為useRef()創建了一個普通的 JavaScript 對象。 useRef()和自己創建一個{current: ...}對象之間的唯一區別是 useRef 將在每次渲染時為您提供相同的 ref 對象。

請記住， useRef 不會在其內容更改時通知您。 改變.current屬性不會導致重新渲染。 如果您想在 React 將 ref 附加或分離到 DOM 節點時運行一些代碼，您可能需要改用回調 ref。