Question

我最近遇到了一个React难题...

这很好：

const App = () => {
  const renderFoo = () => (<p>Foo</p>) 
  return (<div>{renderFoo()}</div>)
}

当然，您也可以完全退出Foo：

const Foo = () => (<p>Foo</p>) 
const App = () => {
  return (<div><Foo /></div>)
}

但是，将Foo定义放在App中会导致可怕的行为。

const App = () => {
  const Foo = () => (<p>Foo</p>) 
  return (<div><Foo /></div>)
}

对于后者，如果您使用表单进行操作，那么每次进行更改时都会失去焦点。（Codepen）

const BadTimes = () => {
  const [text, setText] = React.useState('')
  const RenderForm = () => (
    <input value={text} onChange={e => setText(e.target.value)} />
  )
  return (
    <div>
      <RenderForm />
    </div>
  )
}

所以我想知道：为什么会这样？ {renderForm()}与<RenderForm />之间有什么区别，使得行为完全改变了？

旁注：请避免对此进行效率讨论（例如，“您不应该这样做，因为您要在每个渲染器上重新定义功能”）。我想知道发生了什么事的技术方面。

在渲染与React组件中定义子渲染功能

0 个答案: