Question

问题在于useRef在第一次渲染期间被触发。可能有问题的两个例子。

何时可以承受一些负荷

const Problem1 = () => {  
 const ref = useRef();

 if (loading)    
     return null;

 return <input ref={ref} value={} />;

}

当ref在某种情况下时。

const Problem2 = () => {
 const ref = useRef();

 return user ? <input ref={ref} value={user.name} /> : <Exit >;

}

沙箱示例 https://codesandbox.io/s/nifty-feynman-z68k0

在第二种情况下，我至少可以在显示开头显示元素：无。但是我不知道如何解决第一个问题。

在这些情况下的最佳做法是什么？

Answer 1

看看这是否对您有用：

从React DOCS：https://reactjs.org/docs/hooks-reference.html#useref

useRef（）

但是，useRef（）不仅对ref属性有用。与在类中使用实例字段的方式类似，保留任何可变值都很方便。

之所以有效，是因为useRef（）创建了一个纯JavaScript对象。 useRef（）和自己创建{current：...}对象之间的唯一区别是useRef将在每个渲染器上为您提供相同的ref对象。

useRef对象在整个渲染过程中不会更改。对于带有useRef属性的current对象，您将始终具有相同的引用。可能会改变的是您保留在该current属性中的内容。

function App() {

  const input1_ref = React.useRef(null);
  const input2_ref = React.useRef(null);
  const [showInput2, setShowInput2] = React.useState(false);
  
  React.useEffect(()=>{
    input1_ref.current ?
      console.log('Input1 has been mounted...')
    : console.log('Input1 has NOT been mounted...');
    input2_ref.current ?
      console.log('Input2 has been mounted...')
    : console.log('Input2 has NOT been mounted...');
  });
  

  return(
    <React.Fragment>
      <div>Input 1</div>
      <input type='text' ref={input1_ref}/>
      {showInput2 &&
        <React.Fragment>
          <div>Input 2</div>
          <input type='text' ref={input2_ref}/>
        </React.Fragment>
      }
      <div>
        <button onClick={()=>setShowInput2((prevState)=>!prevState)}>Click</button>
      </div>
    </React.Fragment>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));

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

当元素处于内部条件时如何使用useRef？

1 个答案: