Reactjs React组件重新渲染 import React，{useState}来自“React”； 函数App（）{ const[contact，setContact]=useState({ fName:“”， 名称：“， 电子邮件：“ }); 函数句柄更改（事件）{ 常量{name，value}=event.target； console.log（名称、值）； setContact（（prevValue）=>{ 如果（名称=“fName”）{ 返回{ fName:value， lName:prevValue.lName， 电子邮件：prevValue.email }; }else if（名称==“lName”）{ 返回{ fName:prevValue.fName， lName:值， 电子邮件：prevValue.email }; }else if（姓名==“电子邮件”）{ 返回{ fName:prevValue.fName， lName:prevValue.lName， 电子邮件：value }; } }); } 返回( 你好{contact.fName}{contact.lName}

{contact.email}

提交 ); } 导出默认应用程序； 下面是我的问题的示例代码。 我有一个JS对象作为状态变量。 如果我只更改电子邮件，会发生什么？

---

只有段落元素将被重新呈现，或者段落和h1（因为整个JS对象在setContact中发生了更改）都将被重新呈现。在您的情况下，所有内容都将被重新呈现

import React, { useState } from "react";

function App() {
  const [contact, setContact] = useState({
    fName: "",
    lName: "",
    email: ""
  });

  function handleChange(event) {
    const { name, value } = event.target;
    console.log(name, value);
    setContact((prevValue) => {
      if (name === "fName") {
        return {
          fName: value,
          lName: prevValue.lName,
          email: prevValue.email
        };
      } else if (name === "lName") {
        return {
          fName: prevValue.fName,
          lName: value,
          email: prevValue.email
        };
      } else if (name === "email") {
        return {
          fName: prevValue.fName,
          lName: prevValue.lName,
          email: value
        };
      }
    });
  }

  return (
    <div className="container">
      <h1>
        Hello {contact.fName} {contact.lName}
      </h1>
      <p>{contact.email}</p>
      <form>
        <input onChange={handleChange} name="fName" placeholder="First Name" />
        <input onChange={handleChange} name="lName" placeholder="Last Name" />
        <input onChange={handleChange} name="email" placeholder="Email" />
        <button>Submit</button>
      </form>
    </div>
  );
}

export default App;

因为您正在更改整个对象，这是正确的方法

如果使用单独的状态

  const [contact, setContact] = useState({
    fName: "",
    lName: "",
    email: ""
  });

const[fName，setFname]=useState（“”）

如果只更改fName，则将渲染

H1Component

对于任何组件，如果其

状态

或

属性

发生更改，则会重新渲染。然后你问下一个问题，孩子们得到重新渲染了吗？重复这个过程

  const [fName, setFname] = useState("")
  <H1Component fName={fName} />