Todolist实例组件结构构建

我已经悄咪的完成了整个todoList解构的构建了，放出来给大家参考一下，先是目录部分：

解释一下每个文件的用途：

index.js TodoList根组件
index.scss 样式处理
particles 存放所有子组件
TodoListContent.js 存放todoItem的容器组件
TodoListItem.js 每一个TodoItem组件
TodoListDes.js Todolist描述信息组件
TodoListCAT.js 新建与编辑Item的组件

本次实例是利用Ant Design快速构建的，所以界面不一定好看，大家可以看到我的组件划分的层级很平，甚至还有点不合理，哈哈，其实是为了更好的展示Hook多个场景的使用的，请大家忽略组件这么划分是否实用。

展示一下完成品的功能吧：

操作有点快，其实就是描述了这个应用的功能，可以新建todo，编辑todo，删除todo。展示的时候可以分页展示，标题下记录着全部todo的相关信息，并且数据都保存在LocalStorage中，就这么简单，接下来我们就看一看不包含数据和逻辑，只有UI展示的代码吧，因为要使用Hook，所以我们将其全部构建为函数的形式：

// index.js
import { Typography, Button } from 'antd'
import TodoListContent from './particles/TodoListContent'
import TodoListDes from './particles/TodoListDes'
import TodoListCAE from './particles/TodoListCAE'

const TodoListPage = (props) => {

  return (
    <div className="page-container todolist-page">
      <Typography>
        <Typography.Title level = {3}>待办事项</Typography.Title>
        <TodoListDes/>
        <Button className="create-btn" type="primary" shape="circle" icon="plus" size="large" />
      </Typography>
      <TodoListCAE />
      <TodoListContent />
    </div>
  )
  
}

export default TodoListPage

在实例根组件中嵌入多个子组件。

import { Row, Col, Pagination, Spin, Empty } from 'antd'
import TodoListItem from './TodoListItem'

const TodoListContent = memo((props) => {

  return (
    <div className="todolist-content">
      <Row gutter={16} className="todolist-content__container">
        <Suspense fallback={<Spin/>}>
          <Col className="todolist__item-col" span={6}>
            <TodoListItem />
          </Col> 
        </Suspense>
      </Row>
      <Pagination
        total={20}
        showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
        pageSize={8}
        current={1}
        onChange={(page) => page}
      />
    </div>
  )
})

export default TodoListContent

import React, { memo } from 'react'
import { Card, Icon, Typography } from 'antd'
const TodoListItem = memo((props) => {
  
  return (
    <Card
      className={`todolist__item finished`}
      title={ 'hahahaha' }
      extra={<Icon type="check-circle" style={{ fontSize: '24px', color: '#ccc' }}/>}
      actions={[
        <Icon type="check" key="check" />,
        <Icon type="edit" key="edit" theme="filled" />,
        <Icon type="delete" key="delete" theme="filled" />,
      ]}
    >
      <Typography.Paragraph ellipsis={{ rows: 5 }}>hahahhahahahah</Typography.Paragraph>
    </Card>
  )

})

export default TodoListItem

import React, { memo } from 'react'
import { Typography } from 'antd'

const TodoListDes = memo(() => {
  
  return (
    <Typography.Paragraph>
      当前共有 0 条待办事项，其中0条已完成，0条待完成。
    </Typography.Paragraph>
  )
})

export default TodoListDes

Ok，这里是实例构成的代码，里面有几个不常见的API的使用，例如：Supense，memo。其实这些都是React 16.4以后提出的一些新的API，建议大家去学习一下，在这里我就不介绍了，如果不明白也不愿意去查文档的话，其实完全可以忽略掉我的代码中的这些内容（并不影响任何功能）。

React Hook 实战指南！（2）

Todolist实例组件结构构建