reactjs – 避免在react js中从“input”或“textarea”不断重新渲染

当前在react js中,当我想绑定文本区域或带有“状态”的输入时,我需要在每个用户输入单个字母时设置onChange方法和setState()

我听说如果你setState反应js刷新并重新渲染这个组件中的所有内容

有没有更有效的方法呢？在这种情况下使用“shouldComponentUpdate”将是不正确的,因为如果我不进行“状态”更新,则所有用户输入都将被卡住..

好吧,这就是你在React中实现受控输入元素的方法.

但是,如果性能是您的主要关注点,您可以将输入元素隔离在单独的有状态组件中,因此只会触发自身重新渲染而不是整个应用程序.

所以类似于：

class App extends Component {    
  render() {
    return (
      <div>
        ...
        <MyInput />
        ...
      </div>
    );
  }
}


class MyInput extends Component {
  constructor() {
    super();
    this.state = {value: ""};
  }

  update = (e) => {
    this.setState({value: e.target.value});
  }

  render() {
    return (
      <input onChange={this.update} value={this.state.value} />
    );
  }
}

或者,您可以使用不受控制的输入元素.例如：

class App extends Component {    
  render() {
    return (
      <div>
        ...
        <input defaultValue="" />
        ...
      </div>
    );
  }
}

虽然注意到通常建议使用受控输入.