javascript - react : Understanding the passing of Dynamic Content

Question

所以我正在学习 Maximilian Schwarzmüller 的类(class) 关于 Udemy，我陷入了他的解释之一。

早些时候他做了类似(如下)的事情

  <input type="text" onChange={props.changed} value={props.name} />

以及应用程序 JS

changed={this.eventSwitchHandler} 

在我们键入时更改名称的输入。这是我的 eventSwitchHandler

eventSwitchHandler = (event) => {
  this.setState({
    person: [
    {name: "shivom", age: 23},
    {name: event.target.value, age: 23},
    {name: "Vaibhav", age: 58}
    ]
  })
}

这是当我们的内容是静态的并且仅适用于第二个元素时，现在当我们的内容是动态的时

  render() {
    let person = null;

    if (this.state.showPerson) {
      person= (
        <div>
          {
            this.state.person.map((el, index) => {
              return <Person
              key={el.id}
              click={this.deletePersonHandler.bind(index)}
              name={el.name}
              age={el.age}

            })
          }
       </div>
     );
    }

他正在为更改事件做类似的事情

changed={(event) => this.eventSwitchHandler(event, person.id)}

他提到(在第一个示例中，当我们的内容是静态的时，React 会自动将事件传递给 eventSwitchHandler，但现在他将事件作为匿名函数中的参数。

有人可以解释一下同样的原因吗，因为他在这里的解释有点模糊？

这是我们之前所做的比较

return (

//--//-- lecture 1
  //---// -- we wrote this in lecture (JSX code) -> (1le)
  <div className="App">
        <h1> Hi I am react App</h1>
        <button onClick={this.switchEventHandler.bind(this, "Hait")}>Button</button>
        <Person
          name={this.state.person[0].name}
          age={this.state.person[0].age}>
        </Person>
        <Person
          name={this.state.person[1].name}
          age={this.state.person[1].age}
          click={this.switchEventHandler.bind(this, "rahul")}
          changed={this.eventSwitchHandler} >
        </Person>
        <Person
          name={this.state.person[2].name}
          age={this.state.person[2].age} > (son of Hariom)
        </Person>
       </div>
     )
   }
}

Answer 1

在静态情况下 eventSwitchHandler总是改变name同一人的属性(property)。在第二个示例中，它必须知道哪些人的姓名必须更改，因为每个姓名更改都必须由该处理程序处理。

因此，不要直接将该处理程序传递给 <Person>我们向组件传递一个箭头函数，该函数在调用时还会使用人员 ID 调用处理程序。换句话说，函数本身存储它应该调用哪个人 eventSwitchHandler对于。

当passing additional arguments to event handlers时，这是一种常见的方法。但它有一个警告:

此语法的问题是每次组件呈现时都会创建不同的回调。在大多数情况下，这很好。但是，如果此回调作为 prop 传递给较低的组件，这些组件可能会进行额外的重新渲染。