避免 React Flux 应用程序中受控输入的重新渲染

Question

我的应用程序中有一个经典的 Flux 模式，使用 fluxible。输入的 value 与我的组件的 prop 相关联，它的 onChange 调用一个动作，该动作又更新一个 store，而 store 又将一个 prop 传递给我的组件：

class MyComponent extends React.Component {
  handleChange(e) {
    this.context.executeAction(persist, { value: e.target.value });
  }

  render() {
    return <input value={this.props.value} onChange={this.handleChange.bind(this)}/>;
  }
}

我遇到的问题是，当商店发出更改并且新值被传递到我的组件中时，这会导致它重新渲染，并且输入光标位置丢失（移动到最后）。

我知道我可以为我的组件创建一个自定义的shouldComponentUpdate 方法，但是这样做有点棘手，而且我认为这是一种非常频繁出现的模式，这绝对是乏味的。

是否有一种完善的模式来避免对受控输入进行重新渲染？

Answer 1

我发现ReactLink 的描述为处理这类事情提供了一个很好的模式。这是我想出的：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: props.value };
    this.handleChange = this.handleChange.bind(this);
  }

  componentWillReceiveProps(newProps) {
    // If in some cases you want to handle a new value prop, update state here
  }

  handleChange({ target: { value } }) {
    this.setState({ value });
    this.context.executeAction(persist, { value });
  }

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

基本上，只需忽略那些说“如果您根据道具设置状态，那么您做错了”的人，并根据道具设置您的初始状态。此状态是您的输入现在用于其值的状态。然后，假设新的value 道具确实进来了，它们不会影响你的render 输出。如果您确实希望他们这样做，您可以将逻辑添加到 componentWillReceiveProps。例如，就我而言，我确实想更新输入，但前提是它没有聚焦：

componentWillReceiveProps({ value }) {
  if (!this.state.isFocused) {
    this.setState({ value });
  }
}