React输入框重渲染丢失焦点问题求助（含代码示例）

我来帮你拆解下这个问题的核心，以及给出长期可行的解决方案：

问题根源分析 #

你当前的实现有几个关键问题：

1. 组件未同步dataStore的变化：你的TextInput只在constructor中读取一次dataStore的值，之后dataStore更新时，组件的state完全没有同步——而你用shouldComponentUpdate返回false，又彻底阻止了组件的任何更新，这就导致组件状态和数据源完全脱节。
2. 错误依赖shouldComponentUpdate：正如你看到的React文档提示，这个方法未来会变成“提示性”的，返回false也不能保证组件不重渲染，而且它会阻止所有必要的更新，包括输入框自身状态的同步。
3. 潜在的组件重建问题：虽然你设置了路由的key，但如果TextInput在父组件中没有稳定的key，当父组件（路由加载的顶层组件）重渲染时，React可能会销毁并重新创建TextInput实例，直接导致焦点丢失。

正确的解决方案 #

我们需要让组件主动订阅dataStore的变化，同步自身状态，同时移除不可靠的shouldComponentUpdate，确保组件身份稳定。

第一步：修改TextInput组件，订阅dataStore变化

假设你的dataStore支持按路径订阅/取消订阅的API（如果没有，你需要给dataStore添加这个能力，这是状态管理的基本需求），修改后的组件如下：

export class TextInput extends React.Component {
  constructor(props) {
    super(props);
    // 把props里的路径参数改个更清晰的名字，避免和输入值混淆
    this.storePath = props.storePath;
    this.state = { 
      value: dataStore.get(this.storePath) || ''
    };
    // 绑定回调函数，避免每次渲染创建新函数
    this.handleStoreChange = this.handleStoreChange.bind(this);
  }

  componentDidMount() {
    // 组件挂载后，订阅dataStore对应路径的变化
    dataStore.subscribe(this.storePath, this.handleStoreChange);
  }

  componentDidUpdate(prevProps) {
    // 如果传入的storePath发生变化，切换订阅目标
    if (prevProps.storePath !== this.props.storePath) {
      dataStore.unsubscribe(this.storePath, this.handleStoreChange);
      this.storePath = this.props.storePath;
      // 更新新路径的值到state
      const newValue = dataStore.get(this.storePath) || '';
      this.setState({ value: newValue });
      dataStore.subscribe(this.storePath, this.handleStoreChange);
    }
  }

  componentWillUnmount() {
    // 组件卸载前取消订阅，避免内存泄漏
    dataStore.unsubscribe(this.storePath, this.handleStoreChange);
  }

  handleStoreChange(newValue) {
    // 当dataStore更新时，同步组件state
    this.setState({ value: newValue || '' });
  }

  update(event) {
    dataStore.update(this.storePath, event.target.value);
  }

  render() {
    return (
      <input 
        type="text" 
        value={this.state.value} 
        onChange={e => this.update(e)}
      />
    );
  }
}

第二步：确保组件有稳定的key

在路由加载的顶层组件中使用TextInput时，给它设置一个固定不变的key，确保React不会因为父组件重渲染而重建输入框实例：

// 顶层组件中的使用示例
<TextInput key="profile-username" storePath="user.username" />

第三步：移除路由中可能的不稳定因素

你的路由代码看起来没问题，用path作为Route的key是稳定的，但要确保routeMap中的路径不会动态变化导致key频繁变更——如果路径是固定的，这部分就无需调整。

为什么这个方案可行？ #

1. 主动订阅数据源：组件不再被动等待父组件重渲染，而是主动监听dataStore的变化，实时同步状态，完全符合React的单向数据流逻辑。
2. 移除shouldComponentUpdate：不需要依赖这个不可靠的方法来阻止重渲染，组件只会在state或props变化时正常更新，不会出现状态脱节的问题。
3. 稳定的组件身份：通过固定的key，React能识别出这是同一个输入框组件，不会销毁重建，自然不会丢失焦点。

内容的提问来源于stack exchange，提问作者phil-daniels