避免在react js中从"input"或"textarea"不断重新渲染

Question

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

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

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

Answer 1

好吧，这就是在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>
    );
  }
}

不过，请注意，通常建议使用受控输入。