likes
comments
collection
share

ReactJS：从基础到高级，带你领略Todo App的进化之路

作者站长头像
站长
· 阅读数 44

Todo App 应该是学习前端框架界的 hello world，看一下 Reactjs Todo App 的进化之路，从单文件应用到组件化，从 props 透传到 redux-toolkit， Todo App 本身功能比较简单，但麻雀虽小，五脏俱全。来一起领略一下他的进化之路。 请配合源码阅读，源码在文末

应用主要的功能包括： 添加 、 删除 、 标记完成未完成、过滤不同状态的

效果如下（请忽略样式）

ReactJS：从基础到高级，带你领略Todo App的进化之路

单文件

应用本身功能简单，其实在一个文件内就可以实现全部的的功能

function App() {
    return (
        <div style={{ maxWidth: '400px', border: '1px solid grey', padding: '20px'}}>
          <div>
            <input type="text" placeholder='请输入信息'
              style={{width: '100%'}}
              value={userInput}
              onKeyDown={handleKeyDown}
              onChange={(e) => setUserInput(e.target.value)} />
          </div>
          <ul style={{listStyle: 'none', margin: 0, padding: 0, marginTop: '10px', marginBottom: '10px'}}>
            {
              filterTodos.map(todo => {
                return (
                  <li style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '4px'}} key={todo.id}>
                    <input type="checkbox" value={todo.completed} checked={todo.completed} onChange={() => handleComplete(todo)} />
                    <span style={{ textDecorationLine: todo.completed ? 'line-through' : '' }}>{todo.title}</span>
                    <button onClick={() => handleDelete(todo)}>删除</button>
                  </li>
                )
              })
            }
          </ul>
          <div style={{display:'flex', justifyContent: 'space-between'}}>
            <button onClick={() => setFilter('all')}>所有</button>
            <button onClick={() => setFilter('completed')}>已完成</button>
            <button onClick={() => setFilter('uncompleted')}>未完成</button>
          </div>
    </div>
    )
}

添加

 const [todos, setTodos] = useState([])
 const [userInput, setUserInput] = useState('')

  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      createTodo()
    }
  }

  const createTodo = () => {
    if (!userInput) return
    setTodos((preTodos) => [      {        id: uuid(),        title: `${todos.length + 1} - ${userInput}`,        completed: false      },      ...preTodos    ])
    setUserInput('')
  }

删除

const handleDelete = (todo) => {
    setTodos((preTodos) => preTodos.filter(item => item.id !== todo.id))
}

修改状态

  const handleComplete = (todo) => {
    setTodos((preTodos) => preTodos.map(item => {
      if (item.id === todo.id) {
        return {
          ...item,
          completed: !item.completed
        }
      }
      return item
    }))
  }

过滤不同状态

const [filter, setFilter] = useState('all')

// 定义在 APP的顶部
const applyFilter = (todos, filter) => {
  switch(filter) {
    case 'all':
      return todos
    case 'completed':
      return todos.filter(todo => todo.completed)
    case 'uncompleted':
      return todos.filter(todo => !todo.completed)
    default:
      return todos
  }
}

const filterTodos = applyFilter(todos, filter)

组件化

随着项目的复杂度越来越大，文件越来越多，不可能在一个文件里实现全部逻辑。就需要把项目拆分成不同的组件，把 Todo App 拆分成四个不同组件

  • TodoForm 实现添加功能
  • TodoList 实现列表功能
  • TodoListItem 实现修改，删除功能
  • TodoFilter 实现过滤功能
function App() {
  return (
    <div style={{ maxWidth: '400px', border: '1px solid grey', padding: '20px'}}>
      <TodoForm createTodo={createTodo} />
      <TodoList filterTodos={filterTodos} handleComplete={handleComplete} handleDelete={handleDelete} />
      <TodoFilter setFilter={setFilter} />
    </div>
  )
}

组件嵌套

TodoListItem 是嵌套在 TodoList 中的

const TodoList = ({ filterTodos, handleComplete, handleDelete }) => {
  return (
    <ul style={{listStyle: 'none', margin: 0, padding: 0, marginTop: '10px', marginBottom: '10px'}}>
        {
          filterTodos.map(todo => {
            return (
              <TodoListItem key={todo.id} todo={todo} handleComplete={handleComplete} handleDelete={handleDelete} />
            )
          })
        }
    </ul>
  )
}

const TodoListItem = ({ todo, handleComplete, handleDelete }) => {
  return (
    <li style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '4px'}} key={todo.id}>
      <input type="checkbox" value={todo.completed} checked={todo.completed} onChange={() => handleComplete(todo)} />
      <span style={{ textDecorationLine: todo.completed ? 'line-through' : '' }}>{todo.title}</span>
      <button onClick={() => handleDelete(todo)}>删除</button>
    </li>
  )
}

组件化之后就会出现一个现象，我们再 App 中实现所有的逻辑，然后通过 props 把对应的数据和方法传递给子组件，如果组件嵌套很深，就需要将 props 逐级向下传递，这就是通过所说的 [props透传现象](Vuejs vs Reactjs：组件之间如何通信 - 掘金 (juejin.cn)) 具体可以看一下这篇文章。

Context + Reducer

为了解决 props透传的问题，可以借助 Reactjs 本身提供的 Context 和 Reducer 实现一个简单的状态管理系统

实现 reducer

reducer/TodoReducer.js

import { ADD_TODO_ITEM, DEL_TODO_ITEM, TOGGLE_TODO_ITEM, UPDATE_FILTER } from '../Constant'
import { v4 as uuid } from 'uuid'

export const todoReducer = (state, { type, payload }) => {
    switch(type) {
        case ADD_TODO_ITEM:
            {
                const todos = [...state.todos, { id: uuid(), title: payload, completed: false }]
                return {
                    ...state,
                    todos
                }
            }
        case DEL_TODO_ITEM:
            {
                const todos = state.todos.filter(todo => todo.id != payload)
                return {
                    ...state,
                    todos
                }
            }
        case TOGGLE_TODO_ITEM:
            {
                const todos = state.todos.map(todo => {
                    if (todo.id === payload) {
                        return { ...todo, completed: !todo.completed }
                    }
                    return todo
                })

                return {
                    ...state,
                    todos
                }
            }
        case UPDATE_FILTER:
            return {
                ...state,
                filter: payload
            }
        default:
            return state
    }
}

实现 context, 封装 Provider

context/TodoContext.jsx

const initState = {
    todos: [],
    filter: 'all'
}

export const TodoContext = createContext(null)

export const TodoContextProvider = ({ children }) => {
    const [state, dispatch] = useReducer(todoReducer, initState)
    const value = {
        state,
        addTodo: (todoTitle) => dispatch({ type: ADD_TODO_ITEM, payload: todoTitle }),
        delTodo: (todoId) => dispatch({ type: DEL_TODO_ITEM, payload: todoId }),
        toggleTodo: (todoId) => dispatch({ type: TOGGLE_TODO_ITEM, payload: todoId }),
        updateFilter: (filter) => dispatch({ type: UPDATE_FILTER, payload: filter })
    }
    return (
        <TodoContext.Provider value={value}>
            {children}
        </TodoContext.Provider>
    )
}

App.jsx

function App() {
  return (
    <TodoContextProvider>
      <div style={{ maxWidth: '400px', border: '1px solid grey', padding: '20px'}}>
        {/* 各个组件之间不需传递 props，在各个组件内部实现对应的功能 */}
        <TodoForm />
        <TodoList  />
        <TodoFilter />
      </div>
    </TodoContextProvider>
  )
}

使用 useContext 实现功能

// 添加 TodoForm.jsx

const { addTodo } = useContext(TodoContext)

const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      addTodo(userInput)
      setUserInput('')
    }
  }

// 删除，修改状态 TodoListItem.jsx  

const TodoListItem = ({ todo }) => {
  const { delTodo, toggleTodo } = useContext(TodoContext)

  return (
    <li style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '4px'}} key={todo.id}>
      <input type="checkbox" value={todo.completed} checked={todo.completed} onChange={() => toggleTodo(todo.id)} />
      <span style={{ textDecorationLine: todo.completed ? 'line-through' : '' }}>{todo.title}</span>
      <button onClick={() => delTodo(todo.id)}>删除</button>
    </li>
  )
}

redux-toolkit

使用 Context + Reducer 组合完全可以实现组件的状态管理功能，但是随着需要维护的状态越来越多，自己实现状态管理可能会有性能的问题，这时我们就会使用第三方的状态管理库，redux-toolkit 是在 reactjs 开发中经常使用的状态管理库，随着 Reactjs 的生态越来越完善，更多优秀的状态管理库也在不断涌现 如 zustand xstate jotai recoil等。

安装 redux-toolkit

npm install @reduxjs/toolkit react-redux

定义 store

store/store.js

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
    reducer: {
        
    }
})

提供数据

mani.jsx

import { Provider } from 'react-redux'
import { store } from './store/store.js'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
)

创建不同的状态切片

store/todo/todoSlice.js

使用 createSlice 创建不同的状态切片，不同切片需要对应的名字，初始状态和 reducer 方法

const initialState = {
    todos: [],
    filter: FILTER_ALL
}

export const todoSlice = createSlice({
    name: 'todo',
    initialState,
    reducers: {
        addTodo: (state, { payload }) => {
            state.todos.push({id: uuid(), title: payload, completed: false })
        },
        delTodo: (state, { payload }) => {
            state.todos = state.todos.filter(todo => todo.id != payload)
        },
        toggleTodo: (state, { payload }) => {
            state.todos = state.todos.map(todo => {
                if (todo.id === payload) {
                    todo.completed = !todo.completed
                    return todo
                }
                return todo
            })
        },
        updateFilter: (state, { payload }) => {
            state.filter = payload
        }
    }
})

export const { addTodo, delTodo, toggleTodo, updateFilter } = todoSlice.actions
export default todoSlice.reducer

把状态切片添加到 store 中

store.js

import { configureStore } from '@reduxjs/toolkit'
import todoReducer from './todo/todoSlice'

export const store = configureStore({
    reducer: {
        todo: todoReducer
    }
})

使用状态和方法

为了在组件中使用 redux 提供的状态和方法，需要使用 useSelector 来获取状态，使用 useDispatch 来使用方法

import { useSelector } from 'react-redux'
const applyFilter = (state) => {
  const { todos, filter } = state
  switch(filter) {
    case FILTER_ALL:
      return todos
    case FILTER_COMPLETE:
      return todos.filter(todo => todo.completed)
    case FILTER_UNCOMPLETE:
      return todos.filter(todo => !todo.completed)
    default:
      return todos
  }
}

const TodoList = () => {
  const state = useSelector((state) => state.todo)
  const filterTodos = applyFilter(state)

  return (
    <ul style={{listStyle: 'none', margin: 0, padding: 0, marginTop: '10px', marginBottom: '10px'}}>
        {
          filterTodos.map(todo => {
            return (
              <TodoListItem key={todo.id} todo={todo} />
            )
          })
        }
    </ul>
  )
}


import { useDispatch } from 'react-redux'
import { delTodo, toggleTodo } from './store/todo/todoSlice'

const TodoListItem = ({ todo }) => {
  const dispatch = useDispatch()

  return (
    <li style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '4px'}} key={todo.id}>
      <input type="checkbox" value={todo.completed} checked={todo.completed} onChange={() => dispatch(toggleTodo(todo.id))} />
      <span style={{ textDecorationLine: todo.completed ? 'line-through' : '' }}>{todo.title}</span>
      <button onClick={() => dispatch(delTodo(todo.id))}>删除</button>
    </li>
  )
}

不同版本的github源码

单文件版本

组件版本

context + reducer版本

redux-toolkit版本

相关主题

通过Vue3对比学习Reactjs: 模板语法 vs JSX Vue vs Reactjs之 props Vuejs vs Reactjs：组件之间如何通信 解密v-model：揭示Vue.js和React.js中实现双向数据绑定的不同策略 从零开始：如何在Vue.js和React.js中使用slot实现自定义内容 学习ReactJS Context: 深入理解和使用useContext 深入理解 ReactJS:揭示重复渲染现象及其解决方案 - 掘金 (juejin.cn)

转载自:https://juejin.cn/post/7254376012389826615
评论
请登录