如何使用React Hooks建立一个待办事项列表

摘要：构建事项列表待办事项清单是使用广泛的例子，理由很充分它们是很棒的练习工具。对表单使用我们的表单应该跟踪的值并在保存提交时执行方法。记得敲哦对事项列表使用我们的事项列表也需要。在中传递这个函数我们使用方法把所有不符合的事项保存下来。

原文地址：How to Build a Todo List with React Hooks

React v16.7.0-alpha 引入了钩子(Hooks)。开心！

钩子是能让你在没有用es6类的情况下使用React的状态, 生命周期钩子这些特性的功能。

优势：

隔离状态相关逻辑，使测试更加容易

不需要使用渲染属性或者高阶组件就可以共享状态相关逻辑

根据逻辑而不是生命周期钩子来分离应用程序的关注点

避免ES6类，因为它们很奇怪，不是真正的类，甚至会误导有经验的JavaScript开发人员

查看更多：React’s official Hooks intro

写这篇文章时，钩子还处于内部测试(alpha)阶段。它们的API随时都可能改变。
我建议你在你的业余项目中体验钩子，在它们成为稳定版本之前，不要在线上代码中使用。

待办事项清单是使用广泛的例子，理由很充分——它们是很棒的练习工具。无论你想尝试任何语言或库我都推荐使用它。
在这个例子中，我们只实现其中的一小部分功能：

使用Material Design展示事项列表

通过input添加事项

删除事项

这是github和CodeSandbox的地址

git clone https://github.com/yazeedb/react-hooks-todo
cd react-hooks-todo
npm install

master分支已经实现了这些功能，如果你想自己跟着实现，请切到start分支。

git checkout start

启动工程

npm start

这个应用应该跑在localhost:3000上，这是初始UI:

我们已经设置了material-ui来给页面一个专业的外观，现在我们加入更多功能！

添加一个新文件，src/TodoForm.js。这是初始代码：

import React from "react";
import TextField from "@material-ui/core/TextField";
const TodoForm = ({ saveTodo }) => {
  return (
    

      
    
  );
};
export default TodoForm;

通过组件名字，我们就知道它是用来添加事项的，它也就是我们的第一个钩子。

看这段代码：

import { useState } from "react";
const [value, setValue] = useState("");

useState是一个接收初始状态(state)返回一个数组的函数。console.log 它吧。
数组的第一个值是你的state现在的值，第二个值是state的更新方法。

所以我们把它们叫做value和setValue, 并使用es6解构赋值对它们进行赋值。

我们的表单应该跟踪input的值并在保存提交时执行saveTodo方法。useState能帮我们实现它。

更新updateForm.js， 这是更新之后的代码：

import React, { useState } from "react";
import TextField from "@material-ui/core/TextField";
const TodoForm = ({ saveTodo }) => {
  const [value, setValue] = useState("");
  return (
    
onSubmit={event => {
        event.preventDefault();
        saveTodo(value);
      }}
      
    >
       {
          setValue(event.target.value);
        }}
        value={value}
      />
    
  );
};
export default TodoForm;

回到index.js，引入并且使用这个组件。

...
import TodoForm from "./TodoForm";
...
const App = () => {
  return (
    

    
      Todos
    
    
   
  );
};

现在你在input输入的值已经可以被打印出来了。（记得敲enter哦）

我们的事项列表todos也需要state。在index.js中引入useState。初始state应该是空数组。

import React, { useState } from "react";
...
const App = () => {
  const [todos, setTodos] = useState([]);
  return ...

建立一个新文件:src/TodoList.js

大部分代码是来自Material-UI库的高级组件， 这是更新之后的代码：

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";

const TodoList = ({ todos, deleteTodo }) => (
  
    {todos.map((todo, index) => (
      
        
        
        
           {
              deleteTodo(index);
            }}
          >
            
          
        
      
    ))}
  
);

export default TodoList;

它接收两个属性：

todos： 事项数组，我们遍历数组，建立每一个事项

deleteTodo： 点击一个事项的删除按钮触发这个方法，它接收一个参数： 索引，这个索引唯一标识每一个事项。

在index.js中引入这个组件。

...
import TodoList from "./TodoList";
import "./styles.css";
const App = () => { ...

并在App方法中使用它：

...

还是在index.js中，编辑TodoForm的属性， saveTodo：

 {
    const trimmedText = todoText.trim();
    if (trimmedText.length > 0) {
      setTodos([...todos, trimmedText]);
    }
  }}
/>

这里我们只是把空格去掉，把新的值添加到todos中。

我们现在可以添加事项了！

现在添加新的事项后，我们没有把input清空，这是不好的用户体验！
我们只需要在TodoForm.js中做一点小改动，就可以修复它。

 {
    event.preventDefault();
    saveTodo(value);
    setValue("");
  }}
>

当事项被保存后，我们就把form的state变成空字符串。
现在看起来很好了！

TodoList为每一条事项都提供了索引，根据索引我们能找到我们想删除的事项。

// TodoList.js
 {
    deleteTodo(index);
  }}
>
  

在index.js中传递这个函数

 {
    const newTodos = todos
      .filter((_, index) => index !== todoIndex);
  
    setTodos(newTodos);
  }}
/>

我们使用setTodos方法把所有不符合index的事项保存下来。
删除功能完成！

文章开头我提到 钩子便于分离状态和组件的逻辑。所以我们在这个应用中可以这样做。

新建一个文件叫src/useTodoState.js

import { useState } from "react";

export default initialValue => {
  const [todos, setTodos] = useState(initialValue);

  return {
    todos,
    addTodo: todoText => {
      setTodos([...todos, todoText]);
    },
    deleteTodo: todoIndex => {
      const newTodos = todos
        .filter((_, index) => index !== todoIndex);

      setTodos(newTodos);
    }
  };
};

这就是index.js中原来的代码，我们只是把它分离出来了！我们的状态处理逻辑不再和组件混在一起了！

现在我们只需要引入它，这是更新之后的代码：

import React from "react";
import ReactDOM from "react-dom";
import Typography from "@material-ui/core/Typography";
import TodoForm from "./TodoForm";
import TodoList from "./TodoList";
import useTodoState from "./useTodoState";
import "./styles.css";

const App = () => {
  const { todos, addTodo, deleteTodo } = useTodoState([]);

  return (
    

      
        Todos
      

       {
          const trimmedText = todoText.trim();

          if (trimmedText.length > 0) {
            addTodo(trimmedText);
          }
        }}
      />

      
    
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

现在一切工作正常！

我们可以对表单做同样的处理！
新建一个文件：src/useInputState.js

import { useState } from "react";

export default initialValue => {
  const [value, setValue] = useState(initialValue);

  return {
    value,
    onChange: event => {
      setValue(event.target.value);
    },
    reset: () => setValue("")
  };
};

现在todoForm.js应该变成这样：

import React from "react";
import TextField from "@material-ui/core/TextField";
import useInputState from "./useInputState";

const TodoForm = ({ saveTodo }) => {
  const { value, reset, onChange } = useInputState("");

  return (
     {
        event.preventDefault();

        saveTodo(value);
        reset();
      }}
    >
      
    
  );
};

export default TodoForm;

现在我们全部完成了！
希望你喜欢！！
谢谢！
作者：Yazeed Bzadough