对孩子采取行动会导致父母重新呈现

问题描述

我停止了一个非常简单的代码

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组件会在每次击键时重新渲染。那是非常丑陋的，并且可能导致错误，而这是我没有预料到的，也是无法理解的。有办法预防吗？

解决方法

我认为子组件的重新渲染不会导致父组件的重新渲染。这不是真的。 之所以出现这种奇怪的行为，是因为在您的代码中，您不是将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