setState 和 JSX 属性不应该使用箭头函数

Question

我在这里读过类似的问题

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

而且我了解使用箭头函数如何导致在每次渲染和效果性能时重新创建函数。但是我仍然不完全理解如何在 React Native 中解决这个问题，特别是在使用 setState 时。

例如，如果我有一个 TextInput，它会在 onChangeText 函数中更新组件状态中保存的值，我该如何避免使用箭头函数？

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

我必须为我想要更新的状态的每个属性创建一个处理程序吗？例如，如果我有两个 TextInput 字段电子邮件和密码，是否需要这样处理？

  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

您可以将元素的 id 或名称设置为与状态变量的名称相同。因此，您可以创建一个函数并将其传递给所有输入，例如：

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

Answer 2

通用方式

创建您自己的 TextInput 组件，该组件接受 id 属性并在调用处理程序时将其作为第二个参数传递。这是处理它的通用方法：

class MyTextInput extends Component {

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

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

然后像这样使用它：

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>
        );
    }
}

由于它不使用箭头函数，因此如果您有大量组件，它可以避免性能损失。但请注意，惩罚仅对少数组件是微不足道的，在大多数情况下不值得付出努力。只要确保你不转发作为箭头函数多层深度的处理程序。

react-native 的简单方法TextInput

使用onChange 处理程序获取event 而不仅仅是文本。如果提供了一种方式，该事件还包含输入的name：

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>
        );
    }
}