setState和JSX道具不应使用箭头功能

Question

I have read similar questions here

Why shouldn't JSX props use arrow functions or bind?

JSX props should not use .bind() - how to avoid using bind?

No .bind() or Arrow Functions in JSX Props making no sense to me when I need to pass arguments

And I understand how using an arrow function causes the function to be recreated on each render and effects performance. However I still don't fully understand how to resolve this issue in React Native, specifically when using setState.

For example, if I have a TextInput that updates a value held in the component state in the onChangeText function, how do I avoid using an arrow function?

<TextInput
  value={this.state.text}
  onChangeText={text => this.setState({ text })}
  />

Must I create a handler for each property in the state that I want to update? For example, if I have two TextInput fields Email and Password, would that need to be handled like this?

  updateEmail = email => {
    this.setState({ email })
  }

  updatePassword = password => {
    this.setState({ password })
  }

  render() {
  ...
  <TextInput
      value={this.state.email}
      onChangeText={this.updateEmail}
      />
  <TextInput
      value={this.state.password}
      onChangeText={this.updatePassword}
      />

Answer 1

You can set id or name of an element same with the name of a state variable. So you can create one function and pass it to all inputs like:

onFieldChange = (e) => {
    const key = e.target.id
    const value = e.target.value
    this.setState({[key]:value})
}

Answer 2

Generic way

Create your own TextInput component that takes an id prop and passes it as a second parameter when calling the handler. This is the generic way to handle it:

class MyTextInput extends Component {

    handleTextChange = text => {
        const {id, onTextChange} = this.props;
        return onTextChange && onTextChange(text, id);
    }

    render() {
        return (
            <TextInput {...this.props} onTextChange={this.handleTextChange}
        );
    }
}

And use it like that:

class App extends Component {

    handleTextChange = (text, id) => this.setState({[id]: text});

    render() {
        const {email, password} = this.state;

        return (
            <div>
                <MyTextInput
                    id="email"
                    value={email} 
                    onTextChange={this.handleTextChange}
                />
                <MyTextInput
                    id="password" 
                    value={password}
                    onTextChange={this.handleTextChange}
            </div>
        );
    }
}

As it does not use arrow functions it avoids performance penalties if you have a large amount of components. But note that the penalty is marginal for only a few components and not worth the effort in most of the cases. Just make sure you do not forward the handler that is an arrow function multiple levels deep.

Easy way for react-native TextInput

Use the onChange handler which gets the event instead of only the text. The event also contains the name of the input if one way provied to it:

class App extends Component {

    handleChange = event => {
        const {name, value} = event.nativeEvent;
        this.setState({[name]: value});
    }

    render() {
        const {email, password} = this.state;

        return (
            <div>
                <MyTextInput
                    name="email"
                    value={email} 
                    onChange={this.handleChange}
                />
                <MyTextInput
                    name="password" 
                    value={password}
                    onChange={this.handleChange}
            </div>
        );
    }
}