在本例中，使用...data（结构破坏），以便data中已存在的其他属性不受触发实际调用handleChange()的事件的属性更改的影响。例如，假设您有一个包含以下字段的表单：“姓名”、“年龄”和“职业”。假设您以上述相同的顺序填写表单域。当您填写每个表单域并调用handleChange()时，您的data对象将被更新：
填写名称时：{ name: "John" }
灌装时年龄：{ name: "John", age: "20" }
填写职业时：{ name: "John", age: "20", profession: "student" }
...data（结构化）是一种确保在向data对象添加或更新新属性时保留先前属性的方法。
对于问题的第二部分，方括号用于确保javascript将计算e.target.name，并将其值用作要添加或更新到data的属性。本例中的表单输入字段应分别具有name属性“name”、“age”和“professional”。

下面是handleChange函数的“长”版本。我想它会帮助你更容易地理解函数的使命。

cons handleChange = (e) => {
  const currentData = data;
  currentData[e.target.name] = e.target.value;
  setData(currentData)
}

第一个是...data这样的对象的三个点，它和Object.assign几乎一样，在这个例子中，它帮助你从数据的值中创建一个新的对象。

const data = {firstname:'' , lastname:'' , password:''};
const newData = {...data}; // {firstname:'' , lastname:'' , password:''}

第二个是[]大括号。如果你想从{}中的变量设置一个属性键。你可以用[]大括号把这个变量括起来。

const key = 'name';
const a = {[key]: 'John'} // {name: 'John'}.

这和React没有什么关系，你可以在其他地方得到这样的函数。你可能会读到一些关于它们的文章：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax