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

Question

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

我听说如果你 setState react 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>
    );
  }
}

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