Javascript如何知道何时执行隐式引用传递的函数？反应示例

在我的React示例应用程序中，我通过引用将函数“manipleUserName”作为事件侦听器传递给另一个较小的组件

import React from 'react';
import './UserInput.css';


const userInput = (props) => {
    return (
        <div className="UserInput" >
            <input type="text" value={props.name} onChange={props.setNameFunction}></input>
        </div>
    )
}

export default userInput;

App.js：

import React, { Component } from 'react';
import './App.css';
import UserInput from './components/UserInput';
import UserOutput from './components/UserOutput';

class App extends Component {
  state = {
    username: "Max",
    age: 30
  }    

  manipulateUsername = (event) => {
    this.setState({
      username: event.target.value
    })
  }

  render() {
    return (
      <div className="App">
        <UserOutput name="Jenny" age="32"></UserOutput>        
        <UserOutput name={this.state.username} age={this.state.age}></UserOutput>        
        <UserInput setNameFunction={this.manipulateUsername} name={this.state.username}></UserInput>

      </div>
    );
  }
}

export default App;

相反，我只是让函数保持原样

onChange={props.setNameFunction}

---

其次，我想知道javascript是如何设法将值隐式地“传递”给其他函数的，例如在app.js“manipulaeuser”函数中，它总是会被传递一个事件参数（我想，如果我省略了这个参数，也是如此）。这在幕后是如何运作的？因为在onChange函数中，我调用的是我的函数，但我从未将该事件参数传递给它，那么它是如何工作的呢？

默认情况下，在JavaScript中，对象的赋值和函数参数传递是通过引用传递的，函数是JavaScript中的对象。只有原语在被分配或传递给函数时才获得新的内存位置。

当您将函数传递给onChange以确保道具包含可通过以下代码检查的函数时

onChange={typeof props.setNameFunction === "function"? props.setNameFunction : () => {}}

---

其次，react提供onChange道具，这是一个函数，它检查您传递的道具类型。如果您传递的不是函数，它将给出一个错误。

因为javascript是函数式编程语言，所以可以将函数作为参数传递给另一个函数

React将实际事件包装在JavaScript包装中，这也使得React变得抽象。react中更好的抽象帮助开发人员构建跨平台应用程序（如react Native for Android、IOS应用程序和Electron构建桌面应用程序）

如果你喜欢下面的代码

<input type="text" value={props.name} onChange={props.setNameFunction()}></input>

---

希望它能帮助你。谢谢。

我知道，但那不是真正的问题。我想知道javascript代码何时何地知道何时执行作为引用从某处获取的函数？噢！然后，JavaScript引擎有一个事件队列，当JavaScript完成执行或通过事件队列中的另一个函数/回调完成时，会在其中存储和调用回调，因为JavaScript在内部同步运行。好的，很高兴知道，但它实际上是如何以及为什么执行这个setNameFunction的？因为没有带“（）”的函数的显式调用。您已经像在普通组件中一样，将回调作为道具传递给输入组件。当您在组件中执行回调函数时，react库将执行回调函数。函数调用在react.ok的库中，所以这一切都适用于回调，我不知道。。谢谢你的回答

<input type="text" value={props.name} onChange={props.setNameFunction()}></input>

<input type="text" value={props.name} onChange={(event) => props.setNameFunction(event)}></input>