React组件Props传递与性能优化相关疑问求助

问题1：在Form.jsx中调用addPerson(name)时，Form作为子组件，这是否属于子向父传props？ #

这不算子向父传props。React的props传递规则确实是单向的：仅从父组件流向子组件。这里的本质是：父组件把自己定义的addPerson函数通过props传给了子组件Form，Form组件调用这个函数时，是把输入的name作为参数传递给该函数——而这个函数本身是父组件的，它的作用是修改父组件的people状态。

简单说，子组件没有直接把数据“传给父组件作为props”，而是通过调用父组件提前给的“回调函数”，让父组件自己完成状态更新，这是React里子组件通知父组件更新数据的标准方式。

问题2：父组件index.jsx中<Form addPerson={addPerson} />的具体含义是什么？ #

这行代码是父组件将自己定义的addPerson函数，以名为addPerson的props传递给Form子组件。

• 等号左边的addPerson是传给子组件的props名称，子组件可以通过这个名称拿到对应的函数；
• 等号右边的addPerson是父组件内部定义的那个函数，它的功能是接收一个name参数，创建新的person对象，然后更新父组件的people状态。

通过这种方式，Form子组件就能在表单提交时，调用这个来自父组件的函数，把用户输入的姓名传递过去，触发父组件更新人员列表。

父组件 index.jsx 代码 #

import { useState } from "react";
import { data } from "../../../../data";
import List from "./List";
import Form from "./Form";

const LowerStateChallenge = () => {
 const [people, setPeople] = useState(data);

 const addPerson = (name) => {
    const fakeId = Date.now();
    const newPerson = { id: fakeId, name };
    setPeople([...people, newPerson]);
 };
 return (
 <section>
     <Form addPerson={addPerson} />
     <List people={people} />
   </section>
 );
};
export default LowerStateChallenge;

子组件 Form.jsx 代码 #

import React from "react";
import { useState } from "react";

const Form = ({ addPerson }) => {
 const [name, setName] = useState("");

 const handleSubmit = (e) => {
     e.preventDefault();
     if (!name) {
     alert("Please Provide Name Value");
     return;
    }
 addPerson(name);
 setName("");
 };
 return (
 <div>
     <form className="form" onSubmit={handleSubmit}>
       <div className="form-row">
         <label htmlFor="name" className="form-label">
           name
         </label>
         <input
           type="text"
           name="name"
           id="name"
           className="form-input"
           value={name}
           onChange={(e) => setName(e.target.value)}
 />
       </div>
       <button className="btn btn-block" type="submit">
         submit
       </button>
     </form>
   </div>
 );
};

内容的提问来源于stack exchange，提问作者Cas