React.js实现输入框自动保存（仿Google Tasks）及优化方案咨询

嘿，这个问题我熟！想要实现类似Google Tasks的添加任务逻辑，同时避免不必要的重复渲染，咱们可以从延迟提交时机和优化组件状态管理这两个方向入手，我给你一步步拆解：

方案一：核心需求实现（失去焦点/回车时提交任务） #

我们只在输入框失去焦点（onBlur）或者用户按下回车（onKeyPress）时，才把新任务同步给TodoList，这样就不会因为输入过程中的每一次字符变化都触发TodoList重新渲染了。另外，建议让App组件统一维护任务列表状态，TodoList只负责接收数据并渲染，这样组件职责更清晰：

class App extends Component {
  state = {
    showInput: false,
    addTaskInput: '',
    tasks: [] // 新增：统一维护任务列表
  }

  showAddTask = (e) => {
    this.setState({showInput: true}, () => {
      // 可选优化：弹出输入框后自动聚焦，贴近Google Tasks交互
      this.taskInput?.focus();
    });
  }

  saveInput = (e) => {
    this.setState({addTaskInput: e.target.value});
  }

  // 新增：处理任务提交逻辑（失去焦点/回车触发）
  handleTaskSubmit = () => {
    const {addTaskInput, tasks} = this.state;
    // 过滤空内容，避免添加空任务
    if (!addTaskInput.trim()) return;
    // 添加新任务到列表，并清空输入框
    this.setState({
      tasks: [...tasks, addTaskInput.trim()],
      addTaskInput: ''
    });
  }

  // 新增：监听回车提交，符合用户操作习惯
  handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      this.handleTaskSubmit();
    }
  }

  render() {
    const {showInput, addTaskInput, tasks} = this.state;
    return (
      <div className="app">
        <Button message="Add Task" bsStyle="primary" onClick={this.showAddTask} />
        { showInput && (
          <input
            ref={el => this.taskInput = el} // 用于自动聚焦
            type="text"
            placeholder="Add Task here..."
            value={addTaskInput}
            onChange={this.saveInput}
            onBlur={this.handleTaskSubmit} // 失去焦点时提交任务
            onKeyPress={this.handleKeyPress} // 回车时提交任务
          />
        )}
        {/* TodoList接收tasks数组渲染，不再依赖频繁更新的回调 */}
        <TodoList tasks={tasks} />
      </div>
    );
  }
}

关键改动说明：

• 统一任务状态管理：App组件维护tasks数组，TodoList只负责渲染数据，避免了频繁传递回调导致的不必要渲染。
• 延迟提交时机：只有在输入完成（失去焦点/回车）时才更新任务列表，TodoList仅在有新任务添加时重新渲染。
• 交互细节优化：自动聚焦输入框、支持回车提交，更贴近Google Tasks的使用体验。

方案二：组件拆分优化（可选，适合复杂应用） #

如果你的应用后续功能会更复杂，可以把添加任务的逻辑拆成独立组件，让每个组件职责更单一，后续维护更方便：

// 独立的AddTask组件，专注处理输入和提交逻辑
class AddTask extends Component {
  state = {inputValue: ''};

  handleChange = (e) => {
    this.setState({inputValue: e.target.value});
  }

  handleSubmit = () => {
    const {inputValue} = this.state;
    if (!inputValue.trim()) return;
    this.props.onAddTask(inputValue.trim());
    this.setState({inputValue: ''});
  }

  handleKeyPress = (e) => {
    if (e.key === 'Enter') this.handleSubmit();
  }

  componentDidMount() {
    // 挂载后自动聚焦
    this.inputRef?.focus();
  }

  render() {
    const {inputValue} = this.state;
    return (
      <input
        ref={el => this.inputRef = el}
        type="text"
        placeholder="Add Task here..."
        value={inputValue}
        onChange={this.handleChange}
        onBlur={this.handleSubmit}
        onKeyPress={this.handleKeyPress}
      />
    );
  }
}

// 简化后的App组件，负责状态管理和组件调度
class App extends Component {
  state = {
    showInput: false,
    tasks: []
  }

  showAddTask = () => {
    this.setState({showInput: true});
  }

  addNewTask = (task) => {
    this.setState(prev => ({
      tasks: [...prev.tasks, task]
    }));
  }

  render() {
    const {showInput, tasks} = this.state;
    return (
      <div className="app">
        <Button message="Add Task" bsStyle="primary" onClick={this.showAddTask} />
        {showInput && <AddTask onAddTask={this.addNewTask} />}
        <TodoList tasks={tasks} />
      </div>
    );
  }
}

额外性能优化小技巧 #

如果担心TodoList会因为tasks数组每次都是新引用而重复渲染，可以给TodoList加上React.memo优化：

const TodoList = React.memo(({tasks}) => {
  // 原TodoList的渲染逻辑
});

这样只有当tasks数组的内容真正变化时，TodoList才会重新渲染，进一步提升组件性能。

内容的提问来源于stack exchange，提问作者internet