React Hook 實戰指南！（2）

Todolist實例組件結構構建

我已經悄咪的完成了整個todoList解構的構建了，放出來給你們參考一下，先是目錄部分：

解釋一下每一個文件的用途：

1. index.js  TodoList根組件
2. index.scss 樣式處理
3. particles 存放全部子組件
4. TodoListContent.js 存放todoItem的容器組件
5. TodoListItem.js 每個TodoItem組件
6. TodoListDes.js Todolist描述信息組件
7. 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，建議你們去學習一下，在這裏我就不介紹了，若是不明白也不肯意去查文檔的話，其實徹底能夠忽略掉個人代碼中的這些內容（並不影響任何功能）。