[react] 使用react写一个todo应用，说说你的思路

拆分组件：应用 + 表单部分（input + button）、列表部分（checkbox + ul>li + delete button）
数据设计：表单的待输入字段 + 列表中的List数据（List item中有content isCompleted）
数据存放：所有的数据都存放到“应用”组件，事件和子数据都通过props往下传递
下面是简单的实现

import React, { useState, useRef } from 'react';

function useTodoList(initialList) {
  const id = useRef(0);
  const [list, setList] = useState(initialList);
  // 增加Todo
  const add = text => {
    id.current++;
    setList(
      list.concat({
        id: id.current,
        text,
        isCompleted: false
      })
    );
  };
  // 删除Todo
  const del = id => {
    setList(
      list.filter(e => {
        return e.id !== id;
      })
    );
  };

  // 设置已完成
  const toggleStatus = id => {
    setList(
      list.map(e => {
        if (e.id === id) {
          return {
            ...e,
            isCompleted: !e.isCompleted
          };
        } else {
          return { ...e };
        }
      })
    );
  };

  return [
    list,
    {
      add,
      del,
      toggleStatus
    }
  ];
}

const Form = ({ onAdd }) => {
  const [value, setValue] = useState('');
  const onChange = event => {
    const value = event.target.value;
    setValue(value);
  };
  const onSubmit = () => {
    onAdd(value);
    setValue('');
  };
  return (
    <React.Fragment>
      <input value={value} onChange={onChange} />
      <button onClick={onSubmit}>提交</button>
    </React.Fragment>
  );
};

const TodoList = ({ list, onChange, onDel }) => {
  const setItemStyle = isCompleted => {
    return isCompleted ? { 'text-decoration': 'line-through' } : {};
  };
  return (
    <ul>
      {list.map(e => {
        return (
          <li key={e.id} style={setItemStyle(e.isCompleted)}>
            <input
              type="checkbox"
              checked={e.isCompleted}
              onChange={() => onChange(e.id)}
            />
            <span>{e.text}</span>
            <button onClick={() => onDel(e.id)}>删除</button>
          </li>
        );
      })}
    </ul>
  );
};

export default function App() {
  const [todoList, { add, del, toggleStatus }] = useTodoList([
    { text: 'text', id: 123, isCompleted: false }
  ]);
  return (
    <div>
      <Form onAdd={add} />
      <TodoList list={todoList} onChange={toggleStatus} onDel={del} />
    </div>
  );
}