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

Question

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

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;

在我的UserInput.js中，onChange事件侦听器从主App组件传递函数引用“manipulateUsername”。

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;

这听起来像是一个愚蠢的问题，但是onChange（）函数如何实际“知道”它已经将一个函数作为引用传递，它是如何自动执行该函数的？因为我没有在括号中调用此代码中的函数：

onChange={props.setNameFunction()}

相反，我刚刚离开了这个功能..？ onChange={props.setNameFunction}

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

Answer 1

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

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

其次反应提供onChange prop这是一个函数，它检查你已经通过的道具的类型。如果您传递的不是函数，则会出错。

Answer 2

默认情况下，In JavaScript Assignment和Object的参数传递是通过引用传递完成的，函数是JavaScript中的Object。只有原语在获得分配或传递给函数时才会获得新的内存位置。

Answer 3

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

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

如果您喜欢以下代码

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

该函数将在渲染时执行，而不是在输入的onChange事件中执行。

但是如果你想在处理onChange事件时使用event对象，试试这个

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

希望它会对你有所帮助。谢谢。