React 入门指南：解构 LucasHC 的 AMA 分享

见解分享

2024-01-16 16:27:47

React：现代前端开发的制胜法宝

在前端开发的广阔世界中，React 作为一款备受推崇的库脱颖而出，以其状态管理和同构特性闻名遐迩。React 的秘密武器 得到了掘金 AMA 活动中《React 状态管理和同构实战》作者 LucasHC 的印证。

React 状态管理的艺术

状态管理是 React 开发的核心，而 Redux 则是不二之选。它是一个可预测的状态容器，集中管理着应用程序状态，确保了一致性。Redux 赋予我们以下优势：

清晰追踪状态变化
时间旅行调试
代码可测试性

同构的魔力

同构指的是应用程序在服务器端和客户端的渲染一致性。它的优势包括：

闪电般的初始页面加载速度
优异的搜索引擎优化 (SEO) 表现
优化移动设备体验

构建一个 React 状态管理应用程序

为了展示 React 状态管理的实战应用，让我们着手构建一个简单的待办事项列表应用程序。

步骤 1：项目初始化

npx create-react-app todo-app

步骤 2：安装 Redux

npm install --save redux react-redux

步骤 3：创建 Redux store

在 src 目录下创建 store.js 文件，并输入以下代码：

import { createStore } from 'redux';

const initialState = {
  todos: []
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload]
      };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

步骤 4：创建 React 组件

在 src/components/TodoList.js 文件中：

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import store from './store';

const TodoList = () => {
  const dispatch = useDispatch();
  const todos = useSelector((state) => state.todos);

  useEffect(() => {
    store.subscribe(() => {
      console.log('State updated:', store.getState());
    });
  }, []);

  const addTodo = () => {
    dispatch({ type: 'ADD_TODO', payload: 'New todo' });
  };

  return (
    <div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <button onClick={addTodo}>添加待办事项</button>
    </div>
  );
};

export default TodoList;