重学React：一个案例通关React核心知识点

,,小羊们好，本文希望用一个经典案例TodoMVC带大家掌握React中最核心的知识点。,我们将学到如下核心知识点：,官方推荐的SPA应用创建工具链是create-react–app，我是个vue爱好者，比较青睐vite，借此也可以多踩踩坑：,,用 VSCode 打开这个项目，再回到命令行中执行启动命令：,,调整页面结构，将src/App.js 替换为以下代码：,稍微修改一下样式，效果如下：,,现在我们数据是写死的，最终我们需要一个数组保存所有todo，就像下面这样：,我们需要循环输出它们，React中我们只需要对数组进行map转换即可：,此时效果和之前是完全一样的！,请注意：渲染列表时务必添加key属性用于唯一区分列表项，否则会有警告提示信息！,,我们的待办是有状态的，比如我们需要知道待办是否完成，因此需要像下面这样修改数据结构：,相应的，li中绑定要做相应调整,todo的完成状态需要反映在视图中，我们可以用一个checkbox的勾选状态来表示。,这就需要引入一个react的概念：受控组件，即使用react中的state作为表单输入元素唯一数据源，同时还控制用户输入过程中表单发生的操作。我们修改视图如下：,既然todo.computed要求是react状态，我们就要使用useState将前面的todos声明为一个组件状态：,效果如下：,,我们再加一个新增代码的功能。,,这同样是受控组件的应用，我们添加一个输入框：,同样需要对应的状态和事件控制：,我们增加一个删除待办功能,,这是事件处理和状态修改的应用，新增一个删除按钮：,修改状态，移除数组项时过滤掉删除项，将返回的新数组指定为给todos：,修改待办,我们还想设计一个行内修改待办的交互，效果如下：,,这是一个动态样式、受控组件的综合应用，来看一下react中如何做。,首先修改一下视图结构：,然后给li加一个动态样式：,添加相关样式：,实现相关逻辑：,进入编辑模式之后，我们希望可以自动获取焦点。,分析一下发现，设置焦点的条件是：editedTodo被设置为一个具体的todo时。那么也就是说，在editedTodo这个状态改变后产生了一个自动获取输入框焦点的副作用。,react提供了声明副作用方法useEffect(effect, deps)专门完成此类任务，表示deps中的依赖状态若发生变化则执行effect函数。,此处正好用于实现这个需求：,但是此处有两个问题：如何设置input的焦点？设置哪个input的焦点？,这实际上是另一个知识点，react中如何获取dom元素的引用，从而可以操作dom，答案是：ref。,setEditInputRef中根据todo和editedTodo即可判断是否是我们想要的input元素：,现在可以在副作用中执行设置焦点操作了！,还有个问题，页面刷新之后我们待办状态就失效了。很容易想到把待办列表存入localStorage，初始化时取出，列表有更新时保存。有没有发现，这又是一个典型的副作用使用场景。,我们实现一个todoStorage负责存取：,逻辑实现如下：,效果如下：,,我们的代码量现在已经相当庞大，在它变得难以维护之前我们最好提前做重构。这里可以将app拆分为若干组件，这能够有效分割代码，提高复用性和可维护性。,这里我们将前面div.todo-list部分提取为可复用的TodoList组件，src/TodoList.jsx：,相对应的，App中使用做一些修改：,此时效果和之前是完全一样的！,此时TodoList还是有些臃肿的，我们还可以继续将列表项拆分，比如提取TodoItem，从而进一步拆分代码出去。如果你感兴趣可以自己试试！,前面提取的TodoList中实际上只包含更新和删除操作，新增操作被留在App.jsx中，这看起来有些奇怪。分析发现，todos和其操作是通用逻辑，如果提取出来不仅可以保存状态，且能传递给多个组件使用。比如我们可以提取AddTodo组件，它就会关心新增逻辑；我们又可以提供过滤逻辑，提供给TodoFilter用于筛选不同状态的待办出来。,像上面这种需求就是react中的自定义hooks功能的应用。,我们提取一个hook：useTodos，具体实现如下：,现在我们调整App.jsx中使用方式：,对应的，TodoList实现和使用也有略微变化,下面我们按组件化思想继续完成最后一个需求：按状态过滤待办。,,我们创建一个组件，TodoFilter.tsx：,我们希望外界传入过滤字段visibility，同时还有一个修改它的setVisibility。前者被修改之后，我们希望能对todos执行一个过滤操作获得filteredTodos，从而让TodoList可以根据它去显示。,再在App.jsx中实现一个useFilter的hooks：根据visibility的值做不同程度的过滤。,这里是react中内置钩子useMemo的应用：如果todos或者visibility变化，我们将重新计算filteredTodos,再看看如何使用：,补充一些样式,终于写完了！掌握了好多react知识，但我们的应用还有很多不完善的地方，比如：,这些功能我们会在后面的教程中带大家逐步实现，顺便，我们再学一下状态管理、路由这些功能库的使用