重新渲染输入组件*不会*在重新渲染时失去焦点

Question

我提出了两种不同的方式来渲染输入组件；

   
E.g.1                                   
function myComponent(){                 
const [st, setSt] = useState('');       
                                        
return <div>                            
{Math.random()}                         
<input value={st}                      
  onChange={e=>setSt(e.target.value)/>  
</div>                                 
                                        
           

 E.g. 2
 function StateHelper(){
 const [st, setSt] = useState('');

return {context: {st, setSt}}
}

function myComponent(props){

 const {context} = StateHelper();

 return <div>
  {Math.random()}
    <input value={context.st} onChange={context.setSt}/>
 </div> 

我似乎对其中一个基本原理感到困惑。

例如1、当我打字时，我不会失去对输入组件的焦点。
例如2、每打一个字母，我就会失去焦点。

在这两个示例中，Math.random() 发生了变化，因此它们都重新渲染。

我不知道有什么区别，也不知道为什么我总是失去注意力。 2？

我正在尝试遵循例如2，因为它可以帮助我更好地管理我的代码，但似乎无法理解它。我对反应组件重新渲染不了解什么以及如何修复它？

Answer 1

问题在于您将第二个示例中的 setSt 函数直接传递给输入 onChange，该输入传递了一个 Event 参数。所以它与第一个例子不同。

应该是：

      <input
        value={context.st}
        onChange={(e) => context.setSt(e.target.value)}
      />