使用 React Context, Hooks, Immer, Golang 建立一个TodoList

时间 2020-12-07

标签 html 前端 react git github golang web 面试数据库后端栏目 React 繁體版

原文原文链接

背景

上周末在家没啥事，想写点东西，一时不知道写什么好。而后就想起来一个去了Airbnb 的同窗，说Airbnb 的面试风格是以实操为主，她面了8轮，轮轮都是写代码（2018年），使人十分惧怕。 html

代码题目都不是很难，简单分享几道题：前端

而后我就看到了实现一个Todo List。react

这种题目不难，可是灵活度很高，没有什么限制条件，你随意发挥，能够从多方面考察候选人。git

就拿这道题下手吧，开造。github

[ 文末有本文所有的源代码, 经过这个例子，你会了解 React Context，Hooks 的使用方式，以及 如何使用 Golang 编写 CURD Api]golang

废话很少说了，进入正题。web

功能实现

首先就是新建一个项目，不限工具， CRA 什么的均可以, 我就用了以前本身写的一个工具，简单起了项目, 不过这些都无所谓了，直接上代码：面试

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('root'));

App

// App.js

import React from "react";
import { TodosProvider } from './Store'
import { TodoList } from './TodoList'

const App = () => {
  return (
    <TodosProvider>
      <TodoList />
    </TodosProvider>
  );
}

export default App

Store

这里我建立了两个Context，一个用于存储数据，另外一个用于更新数据。数据库

例如：后端

const initialState = []

const StateContext = React.createContext(initialState)
const UpdateContext = React.createContext(null)

被 Context 包裹的组件能够取用这些传入的值。

完整代码：

// Store.js
import React from 'react'
import produce from 'immer'

// An array of todos, where a todo looks like this: 
// { id: string; title: string; isCompleted: boolean }
const initialTodos = [{
  id: 1,
  title: "One",
  isCompleted: false
}, {
  id: 2,
  title: "Two",
  isCompleted: false
}, {
  id: 3,
  title: "Three",
  isCompleted: false
}]

const StateContext = React.createContext(initialTodos)
const UpdateContext = React.createContext(null)

export function TodosProvider({ children }) {
  const [todos, updateTodos] = React.useReducer(produce, initialTodos)
  return (
    <UpdateContext.Provider value={updateTodos}>
      <StateContext.Provider value={todos}>
        {children}
      </StateContext.Provider>
    </UpdateContext.Provider>
  )
}

export function useTodos() {
  return [React.useContext(StateContext), React.useContext(UpdateContext)]
}

Todo主体

这里的实现也很简单，我先简单作了两个小功能，一个是完成某一项，一个是删除某一项，完整代码：

// TodoList
import React from 'react';
import { useTodos } from './Store'

export function TodoList() {
  const [todos, updateTodos] = useTodos()

  const deleteTodo = id => updateTodos(todos => {
    const todoIdxToDelete = todos.findIndex(todo => todo.id === id)
    todos.splice(todoIdxToDelete, 1)
  })

  const completeTodo = id => updateTodos(todos => {
    todos.find(todo => todo.id === id).isCompleted = true
  })

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id} style={todo.isCompleted ? { color: 'red' } : { color: 'green' }}>
          <span>{todo.title}</span>
          <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          <button onClick={() => completeTodo(todo.id)}>Complete</button>
        </li>
      ))}
    </ul>
  )
}

DEMO：