主页 / 问题 / 658292
Accepted
Skywave
Asked:2020-04-25 19:16:42 +0800 CST2020-04-25 19:16:42 +0800 CST

打字时减慢应用程序

  • 772

我有一个将 React 与 Redux 结合使用的应用程序

只要有输入或文本区域的输入，应用程序就会开始变慢。人们在抱怨。

我读到您需要禁用 devtools - 将其关闭。

另外还有关于shoultComponentUpdate优化的建议，但是这里需要每次都更新，因为。每个字母都必须打印出来。

有没有人遇到过类似的问题？应用程序状态的大小会影响这一点吗？应用程序状态由多个 reducer（7-8 个）组合而成。每个 reducer 可以是一个 Immutable.js 对象或一个简单的 js 对象。

OnChange，调用一个方法，将嵌套的React组件向上浮动3-4层。然后调用一个动作，它立即返回一个仅包含名称和值的对象。然后一个 reducer 将其拾取并通过 Immutable.setIn 在一行中更改状态。

一切都很顺利，我不知道在哪里优化。请帮助，谁能。

javascript

2 个回答

  1. Best Answer

    尝试使用不受控制的组件。更改输入的内容不会更改组件的状态，因此不会再次调用 render() 方法，同时打印输入中的字母。并且输入值在 this.input.value 中可用，您可以使用它，例如，在提交表单时。

    class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}
    • 1

  2. 我会添加我自己的版本。

    为了不给redux造成压力，我通过this.setState向组件的state写入数据，发送到redux会经过一个延时，或者根据其他条件。

    handleChange(e) {
    let self = this,
        event = {};

    // продолжаем извращаться
    for(var k in e) event[k]=e[k];

    let newState = {};
    for(var k in this.state) newState[k]=this.state[k];

    newState.field[event.target.name] = event.target.value;
    this.setState(newState);

    clearTimeout(this.changeTimeout);
    this.changeTimeout = setTimeout(function(){
        self.props.onChange(event, {
            name: event.target.name,
            value: event.target.value
        });
    }, 1000);
}

    顺便问一个问题：如何优化这段代码？

    • 0

相关问题