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中，on Change事件侦听器从主应用程序组件中传递了函数引用" 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以确保Prop包含一个可以通过以下代码检查的函数。

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

第二个React提供了一个函数的Onchange Prop，它检查您已通过的道具类型。如果您通过功能以外的其他功能会出现错误。

Answer 2

默认情况下，在JavaScript 中，对象的分配和函数参数传递是通过引用传递完成的，并且函数是JavaScript中的对象。只有原始的分配或传递到功能时才能获得新的内存位置。

Answer 3

作为JavaScript是功能编程语言，将功能作为参数传递到另一个函数是可能的。

在JavaScript包装器中包装实际事件的React包装，这也使得用来抽象使用。React中更好的抽象有助于开发人员构建跨平台应用程序（例如Android，iOS应用程序和电子以构建桌面应用程序的React Native）。

如果您喜欢以下代码

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

希望它对您有帮助。谢谢。