Question

我在这里读过类似的问题

我理解如何使用箭头函数导致在每个渲染和效果性能上重新创建函数。但是，我仍然不完全了解如何在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>
        );
    }
}

由于它不使用箭头功能，因此如果您有大量组件，它可以避免性能损失。但请注意，对于少数组件而言，惩罚是微不足道的，并且在大多数情况下不值得付出努力。只需确保不要将多个级别的箭头函数处理程序转发。

反应原生`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>
        );
    }
}

setState和JSX道具不应该使用箭头函数

2 个答案:

通用方式

反应原生`TextInput`

setState和JSX道具不应该使用箭头函数

2 个答案:

通用方式

反应原生TextInput

反应原生`TextInput`