对孩子的反应行动导致重新渲染父母答案

【问题标题】：react actions on child leads to re-render of parent对孩子的反应行动导致重新渲染父母
【发布时间】：2021-01-01 07:04:00
【问题描述】：

我停在一个相当简单的代码上

function App() {
  let [items, setItems] = useState(getSessionStorage())

  console.log(items);
  if (items) {

    return (
      <div className="App">
        {items.map((item) => FormLine(item))}
      </div>

    );
  }
  else { return (null) }
}

export default App;

App 组件采用外部函数 getSessionStorage，如果第一次调用，该函数会返回 sessionStorage 某些内容或项目。

FormLine 是一个渲染表单域的函数

const { name, netPrice, quantity, vat, grossPrice } = props;
let [inputName, setInputName] = useState(name);

return (
  <input_.outerWrapper id='my_form' className="my_form" >
    <input
      required
      minLength="1"
      maxLength="20"
      pattern="[a-zA-ZąĄććęęłŁńŃóÓśŚżŻŹŹ ]+"
      placeholder="Nazwa..."
      type="text"
      ref={input}
      value={inputName}
      onChange={(e) => setInputName((inputName = e.target.value))}
    />
  </input_.outerWrapper>
)

以此类推。问题是，当我在 FormLine 中键入字母时，App 组件会在每次击键时重新呈现。这是非常丑陋的，可能会导致错误，这是我没有预料到和不理解的。有什么办法可以预防吗？

【问题讨论】：

谢谢，我是钩子新手。那是在课堂组件中的另一个故事，所以我很惊讶。可以预防吗？
@CertainPerformance 我不认为子重新渲染会导致父重新渲染，否则如果子组件也会渲染父组件，那么创建子组件毫无意义。
@CertainPerformance 因此，如果 console.log("sample") 父组件中有任何内容，那么每当子状态发生变化时，它都会记录“样本”？
是的，我只是先用它来检查它是否接收到正确的值，然后看到它重新渲染。是的，console.log() 是这种情况下的标记
你需要在列表中使用 key prop {items.map((item, index)=>
FormLine(item))
}

标签： reactjs react-hooks rerender

【解决方案1】：

我不认为子组件重新渲染会导致父组件重新渲染。这不是真的。您之所以出现这种奇怪的行为，是因为在您的代码中，您没有将 FormLine 用作组件，而是用作普通函数所以而不是这个：

return (
      <div className="App">
        {items.map((item) => FormLine(item))}
      </div>

    );

使用这个：

return (
      <div className="App">
        {items.map((item, index) => (
          <div key={index}>
            <FormLine name={item} />
          </div>
        ))}
      </div>
    );

您可以在此 CodeSandBox 链接中查看演示：https://codesandbox.io/s/white-leaf-zvn2g

【讨论】：