Question

我有这样的状态：

{
    textfield: '',
    data: [] //huge, used to render elements within the render()
}

当我想更新textfield值（简单文本输入）时，我使用this.setState({ textfield: newValue });。问题在于，当我在字段中写入字符时会有些滞后，因为它会重新呈现所有内容。

使用shouldComponentUpdate()并深入检查我的数据对象是避免重新呈现所有内容的唯一方法吗？还是有更好/更有效的方法？

谢谢

Answer 1

我猜是由于每个键的状态变化导致其重新呈现了整个组件。

您可以将输入元素隔离在单独的有状态组件中，从而仅触发自身而不是整个应用程序的重新渲染。

类似这样：

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

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

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

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

在大小状态上反应setstate

1 个答案: