Javascript React：理解动态内容的传递

因此，我正在学习一门关于Udemy的课程，，我被他的一个解释难住了

早些时候，他做了类似（如下）的事情

在键入时更改名称的输入。这是我的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>
     );
    }

他提到（在第一个示例中，当我们的内容是静态的时，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>
     )
   }
}

返回(
//--//--第1讲
//---//--这是我们在讲座（JSX代码）->（1le）中写的
你好，我是react应用程序
按钮
（哈利姆之子）
)
}
}

在静态情况下，

eventSwitchHandler

始终更改同一个人的

name

属性。在第二个示例中，它必须知道哪些人的姓名必须更改，因为每个姓名更改都必须由该处理程序处理

因此，我们没有直接将该处理程序传递给

组件，而是传递了一个arrow函数，该函数在被调用时使用person id另外调用该处理程序。换句话说，该函数本身存储了它应该为哪个人调用

eventSwitchHandler

这是一种常见的方法，但有一个警告：

---

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

在静态情况下，

eventSwitchHandler

始终更改

名称同一个人的属性。在第二个示例中，它必须知道哪些人的姓名必须更改，因为每个姓名更改都必须由该处理程序处理

因此，我们没有直接将该处理程序传递给
组件，而是传递了一个arrow函数，该函数在被调用时使用person id另外调用该处理程序。换句话说，该函数本身存储了它应该为哪个人调用
eventSwitchHandler

这是一种常见的方法，但有一个警告：

此语法的问题在于每次组件渲染时都会创建不同的回调。在大多数情况下，这是可以的。但是，如果此回调作为道具传递给较低级别的组件，则这些组件可能会执行额外的重新渲染

  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)}

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>
     )
   }
}