第九篇：前端框架设计模式详解 | 豆包MarsCode AI 刷题第九篇：前端框架设计模式详解

第九篇：前端框架设计模式详解 | 豆包MarsCode AI 刷题

在青训营 X 豆包 MarsCode 技术训练营中，我选择了深入研究前端框架中的设计模式，特别是如何在React中应用这些模式以提高代码的可维护性和扩展性。

设计模式概述

设计模式是软件开发中的最佳实践，它们提供了解决特定问题的通用方案。在前端开发中，常见的设计模式包括单例模式、观察者模式和工厂模式等。

React中的设计模式应用

单例模式：在React中，单例模式通常用于管理全局状态。例如，Redux的store就是一个典型的单例模式应用。
观察者模式：React的组件生命周期和状态管理中广泛应用了观察者模式。组件通过监听状态变化来自动更新视图。
容器-视图模式：这种模式将组件分为容器组件和视图组件，容器组件负责逻辑和状态管理，而视图组件负责渲染。

javascript

// 容器组件
class UserContainer extends React.Component {
  state = { user: null };

  componentDidMount() {
    fetchUser().then(user => this.setState({ user }));
  }

  render() {
    return <UserView user={this.state.user} />;
  }
}

// 视图组件
const UserView = ({ user }) => (
  <div>{user ? user.name : 'Loading...'}</div>
);

优缺点分析

优点：设计模式提高了代码的可读性和可维护性，使得代码结构更加清晰。
缺点：过度使用设计模式可能导致代码复杂性增加，影响性能。

总结

通过这次对前端框架设计模式的研究，我更加理解了如何利用设计模式提高项目的质量。在未来的开发中，我将继续探索更多设计模式的应用场景。

第十篇：使用React实现待办事项列表 | 豆包MarsCode AI 刷题

在青训营 X 豆包 MarsCode 技术训练营中，我实践了使用React实现一个简单的待办事项列表应用，重点学习了React的组件化开发和状态管理。

项目概述

待办事项列表是一个经典的入门项目，通过这个项目，我练习了React的基本概念，包括组件、状态和事件处理。

实现步骤

创建组件：将应用分为输入组件、列表组件和单项组件，分别负责不同的功能。
状态管理：使用React的useState钩子来管理待办事项的状态。
事件处理：实现添加、编辑和删除待办事项的功能。

javascript

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState("");

  const addTodo = () => {
    setTodos([...todos, { text: inputValue, completed: false }]);
    setInputValue("");
  };

  return (
    <div>
      <input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={addTodo}>Add</button>
      <TodoList todos={todos} />
    </div>
  );
}

学习收获

通过这个项目，我加深了对React组件化开发的理解，并掌握了基本的状态管理技巧。项目的实现让我对React有了更直观的认识。