React JSX 与函数在焦点处理方面有区别吗？

Question

在 React JSX 与函数调用来呈现组件时，当涉及到函数调用或（标记）组件之间的差异时，问题的答案是“否”。在这里，我有一个令人困惑的例子，其中函数调用和标记之间的差异导致焦点行为的变化。我相信有 React 专家在那里有一个合理的解释 - 不幸的是，我还没有到达那里;-）下面是带有标记和函数调用之间注释差异的代码：import React, {useState} from 'react';function FocusRiddle() {    const [currentRow, setCurrentRow] = useState({firstName: 'Barack', lastName: 'Obama'});    // This keeps the focus correctly    return <div>{Att()}</div>;    // This loses the focus after every letter !!!    // return <div><Att /></div>;    function Att() {        return <div>            <h1>Welcome to Focus Riddle</h1>            <div>                <MyInput key={'firstName'} name={'firstName'} row={currentRow} action={updateRow}/>            </div>            <div>                <MyInput key={'lastName'} name={'lastName'} row={currentRow} action={updateRow}/>            </div>            <div>                <button onClick={() => alert(JSON.stringify(currentRow))}>Show Row</button>            </div>        </div>    }    function updateRow(name, value) {        setCurrentRow({...currentRow, [name]: value});    }}function MyInput({name, row, action}) {    return <input        value={row[name]}        onChange={(event) => action(name, event.target.value)}/>}export default FocusRiddle;

Answer 1

调用等效于实现普通组件，因为您刚刚声明了一个函数并在组件范围内调用它。Att()

所以这里没什么特别的，状态应该持续下去：

function FocusRiddle() {

  const [currentRow, setCurrentRow] = useState({

    firstName: "Barack",

    lastName: "Obama",

  });

  function updateRow(name, value) {

    setCurrentRow({ ...currentRow, [name]: value });

  }

  return (

    <div>

      <div>

        <h1>Welcome to Focus Riddle</h1>

        <div>

          <MyInput

            key={"firstName"}

            name={"firstName"}

            row={currentRow}

            action={updateRow}

          />

        </div>

        <div>

          <MyInput

            key={"lastName"}

            name={"lastName"}

            row={currentRow}

            action={updateRow}

          />

        </div>

        <div>

          <button onClick={() => alert(JSON.stringify(currentRow))}>

            Show Row

          </button>

        </div>

      </div>

    </div>

  );

}

但是，在调用时，您可以创建 React Element，因为使用 JSX 语法是 React.createElement 的糖语法。深入了解 JSX。<Att/>

因此，有了它，React元素对道具的感知在渲染它们的父级时会发生变化和渲染。

当您键入并调用 时，将呈现，并且组件卸载（因为您在每次渲染上重新声明组件），因此您将失去焦点。inputsetCurrentRowFocusRiddleAttAtt