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() {&nbsp; const [currentRow, setCurrentRow] = useState({&nbsp; &nbsp; firstName: "Barack",&nbsp; &nbsp; lastName: "Obama",&nbsp; });&nbsp; function updateRow(name, value) {&nbsp; &nbsp; setCurrentRow({ ...currentRow, [name]: value });&nbsp; }&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <h1>Welcome to Focus Riddle</h1>&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <MyInput&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={"firstName"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name={"firstName"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; row={currentRow}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; action={updateRow}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <MyInput&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={"lastName"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name={"lastName"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; row={currentRow}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; action={updateRow}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={() => alert(JSON.stringify(currentRow))}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Show Row&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; );}但是，在调用时，您可以创建 React Element，因为使用 JSX 语法是 React.createElement 的糖语法。深入了解 JSX。<Att/>因此，有了它，React元素对道具的感知在渲染它们的父级时会发生变化和渲染。当您键入并调用 时，将呈现，并且组件卸载（因为您在每次渲染上重新声明组件），因此您将失去焦点。inputsetCurrentRowFocusRiddleAttAtt