javascript - How to pass variables to a function reference? - Stack Overflow

admin管理员组

文章数量:1201570

In react native when you have functions that need to run at render and must pass variables, most people suggest that one should use

onPress{() => this.functionName(variable)}

However when working with large lists and complex components you have to optimize your code. Creating a new function for every renderItem in a flatList reduces performance, sometimes hugely so depending on how many functions per renderItem you are creating. So the suggestion is to move from creating a function at render to using a function reference. Like this:

functionName = () => {
   //code
}

onPress={this.functionName}

However I haven't been able to figure out how to pass variables to the function with this method.

If you do this:

onPress={this.functionName(variable}

It will just run the function instantly on component load.

Any ideas?

In react native when you have functions that need to run at render and must pass variables, most people suggest that one should use

onPress{() => this.functionName(variable)}

However when working with large lists and complex components you have to optimize your code. Creating a new function for every renderItem in a flatList reduces performance, sometimes hugely so depending on how many functions per renderItem you are creating. So the suggestion is to move from creating a function at render to using a function reference. Like this:

functionName = () => {
   //code
}

onPress={this.functionName}

However I haven't been able to figure out how to pass variables to the function with this method.

If you do this:

onPress={this.functionName(variable}

It will just run the function instantly on component load.

Any ideas?

• javascript
• reactjs
• function
• react-native

Share Improve this question Follow asked May 31, 2018 at 18:48 rt_rt_ 1,19522 gold badges1616 silver badges2929 bronze badges 1

• Where do you get this variable? – devserkan Commented May 31, 2018 at 18:52

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 12

I highly recommend using currying to pass an argument.

Currying is the process in which you separate a function into several functions that each take a single argument. The reason why this method works really well, in this case, is because when you call a function on the render method, the argument passed is automatically the event, so to pass the second argument, the function would have to be curried in order receive the next argument.

You would define your function as such:

functionName = variable => event => {
 //code 
}

You can then go ahead and call your function in the render method:

onPress={this.functionName(variable)}

This is a great article if you would like to learn more: Currying In JS

This method is extremely elegant and useful because it removes the need to wrap your function call in an anonymous function inside the render method of React.

In any other case, you can also do what the official React Docs suggest: React Docs on passing arguments to event handlers

Good luck!

As Esther Cuan suggests, currying is the way to go. Chances are, if you are using dynamically created functions dependent on variable changes. Then the time spent on creating these functions is much less than the time spent rerendering the components every time the variables change. Efficiency wise, the priority should be to minimize variable changes in order to minimize rerenders long before the constant redecleration of functions.

If however you are certain that some functions are consistent, even through rerenders, and do not want them to be redeclared here's how you can achieve that:

class Component extends React.Component {
  functionName = (e) => {
    const { variable } = this.props
    // run logic on the event and variable
  } 

  render() {
    // some code
    onPress={this.functionName}
  }
}

You'll notice with this approach functionName is only declared once.

The performance flaw with this approach is that now you have to create another component (and possibly the lifecycle methods that come with the class) in order to pass variable as a prop, in order to bypass the need for currying.

In your constructor ( or whenever variable is available ), you can pre-bind the function just once:

this.handle_press = this.functionName.bind(this, variable);

I'm writing this answer as a learner. So it may need some clarification. When I start to code with JS and React I encounter this problem (thanks to linter) and searched a little bit to learn the best practices. But, I could not find any optimized way to use a variable directly like this. What I do for those situations:

• If I am rendering list of items, I create its own component as suggested here: react/jsx-no-bind So, pass a callback function and variable, do the job and use this callback function. Yeah, some work here, creating a bunch of handling functions. But, if this is the optimized way, getting my hands dirty is not a problem.

• If variable is in the state or coming from props, then there is no need to use it on the onClick method like this. In the handler function we can access this variable.

You can pass variable as value parameter for that element e.g.

<button
 value={variable}
 onPress={this.functionName}>
 click
</button>

Then you can "pick up" that variable as:

fuctionName = e => {
 const yourVariable = e.target.value;
 // now you have access to your variable through the const declaration
}

本文标签： javascriptHow to pass variables to a function referenceStack Overflow