如何更改输入字段值，使其不会在每次更改时贯穿整个 Redux 状态更新周期

How do I change input field value the way it doesn't run through the whole Redux state update cycle every time it is changed?

本文关键字：周期 更新 状态 Redux 字段 输入 何更改      更新时间：2023-09-26

>我有一个组件，它有一个绑定到应用程序状态的输入字段，如下所示

import {updateTitle} from '../actions/sales';
class Sale extends Component {
  onTitleChange(event) {
    const {value} = event.target;
    const {id} = this.props;
    this.props.updateTitle(id, value);
  }
  render() {
    return (
      <input
        placeholder="The Title"
        value={this.props.title}
        onChange={::this.onTitleChange} />
    );
  }
}
export default connect(({sales}) => ({
  title: sales.title
}), {
  updateTitle
}))(Sale);

但是标记要重得多。

一切都很好，除了当我尝试快速在此字段中键入内容时，浏览器会显着滞后，因为每个输入更改(这意味着每次按键(都贯穿从事件处理程序到动作创建者、实际动作、化简器、到商店更新、组件道具更新和渲染的整个循环。它超级慢。有什么方法可以优化吗？

我错过了一些明显的东西吗？

我尝试使用作为道具值传递onChange去反弹函数，但这样，应用程序状态根本不会更新。我还尝试使用组件级状态和setState以及应用程序级状态，但我认为这种方法与 Redux 的想法相矛盾，因此不应使用。

React 组件可以受控或不受控制。受控输入将其值作为 prop 接收，并为值中的每个更改触发事件处理程序。不受控制的控件将用户输入保留在本地状态，并触发事件处理程序以进行更改。

您的输入目前是受控的，但如果您想将更改保留在本地，为什么不使其不受控制呢？然后，您可以在用户完成键入时在 onBlur 事件中调用 updateTitle，或者在用户键入时取消反弹 onChange 事件以降低调用 updateTitle 的频率。

您至少有两个选项。第一个：尝试连接到更靠近输入组件的 redux 存储(这样受更改时不受值更新影响的组件更少(

通常，尽管我们将中间值存储在父组件状态中，并且偶尔将值刷新(如正常的去抖动(到redux存储中，或者在类似onBlur之类的东西上执行此操作。因此，在每次更改时更新状态值，并偶尔将值刷新到存储区。它涉及更多注意确保值同步，但这些是优化热路径的一些权衡。

相关文章：