后台。上周末我在家无事可做。想写点什么，但又不知道写什么。然后想起一个去Airbnb的同学，说Airbnb的面试风格主要是实战。她面试了8轮，每一轮都写代码（2018年），非常吓人。代码题不难，分享几个题：然后看到了一个TodoList的实现。这种题目不难，但是很灵活，没有什么限制。你可以随心所欲地使用它，你可以从多方面考察候选人。先从这个问题开始吧，凯造。【文末有本文全部源码。通过这个例子，你将了解如何使用ReactContext、Hooks，以及如何使用Golang编写CURDApi】废话不多说，进入正题。实现功能首先要新建一个工程。对工具没有限制。CRA无所不能。我用之前写的一个工具简单的启动了项目，不过没关系。只需上传代码：//index.jsimportReactfrom'react';importReactDOMfrom'react-dom';importAppfrom'./App.js';ReactDOM.render(,document.getElementById('root'));App//App.jsimportReactfrom"react";import{TodosProvider}from'./Store'import{TodoList}from'./TodoList'constApp=()=>{return();}exportdefaultAppStore这里我创建了两个Context，一个用来存储数据，一个用来更新数据。例如：constinitialState=[]constStateContext=React.createContext(initialState)constUpdateContext=React.createContext(null)被Context包裹的组件可以访问这些传入的值。完整代码：//Store.jsimportReactfrom'react'importproducefrom'immer'//待办事项数组，其中待办事项如下所示：//{id:string;标题：字符串；isCompleted:boolean}constinitialTodos=[{id:1,title:"One",isCompleted:false},{id:2,title:"Two",isCompleted:false},{id:3,title:"三",isCompleted:false}]constStateContext=React.createContext(initialTodos)constUpdateContext=React.createContext(null)exportfunctionTodosProvider({children}){const[todos,updateTodos]=React.useReducer(produce,initialTodos)返回({children})}exportfunctionuseTodos(){返回[React.useContext(StateContext),React.useContext(UpdateContext)]}这里Todobody的实现也很简单。我简单的先做了两个小功能，一个是完成某个item，一个是删除某个item。完整代码：//TodoListimportReactfrom'react';import{useTodos}from'./Store'exportfunctionTodoList(){const[todos,updateTodos]=useTodos()constdeleteTodo=id=>updateTodos(todos=>{consttodoIdxToDelete=todos.findIndex(todo=>todo.id===id)todos.splice(todoIdxToDelete,1)})constcompleteTodo=id=>updateTodos(todos=>{todos.find(todo=>todo.id===id).isCompleted=true})返回({todos.map(todo=>({todo.title}deleteTodo(todo.id)}>删除completeTodo(todo.id)}>完成))}
)}DEMO：接下来，将新添加的内容添加到一起。我想我已经做到了这一步。数据一刷新就没了。只需将其保存在数据库中即可。最终外观：后端接口实现：看看这几个CURD接口是怎么写的：Api:CApi:UApi:RApi:D代码比较简单，一看就知道是干什么的，所以我赢了不多解释。后端的完整代码在这里：https://github.com/beMySun/go...前端的完整代码在这里：https://github.com/beMySun/re...数据库使用mySql，内置了Library，你可以使用这个SequelPro来添加和修改表，非常方便。如果不想用这个，也可以使用命令行工具来操作。再贴几个会用到的命令：showdatabases；使用数据库；描述todos_tab；从todos_tab中选择*限制10；添加一个字段：text加一个字段：isCompleted最后的功能很简单，但是做的时候需要考虑的还是很多的。如果有小伙伴也想学习，可以自己下载代码运行一下。后端完整代码在这里：https://github.com/beMySun/go...前端完整代码在这里：https://github.com/beMySun/re...demo后端包含ThecompleteCURD是一个很好的学习demo，希望对大家的学习有所帮助。少才少学，文中难免有失误。如有错误，请指正，谢谢。多于。如果本文对你有帮助，别忘了点赞哦~参考资料：https://learnku.com/golang/t/...https://gorm.io/docs/update.h。..
