TodoList 案例之静态组件

上节课我们了解了关于组件化编码流程的一些知识点，但是光说不练假把式，这节课开始往后几个小节我们来编写一个案例，我也不知道为什么前端教程一写案例就是TodoList。那我们也就别那么挑剔了，我们也用TodoList案例吧。

回顾

在开始我们今天的案例之前，我们先来对上节课做一个简单的回顾。

新项目三大必要模块package.json，public，src
组件化编码流程分三步
拆分组件
实现静态组件
实现动态组件
- 动态加载数据
- 加交互

以上便是上节课所介绍的一些主要知识点，接下来我们遍开始我们的案例编写。

需求

我们想大家应该都见过TodoList是什么样子，我们这次要做的其实也就是这么个玩意儿

大家来看这个图，我们要展示我们的所有的todolist，每一条todo都要有删除功能，而且咋输入框中输入todo，按回车就会新增。而且新增的todo要在上面显示，当前面的这个复选框被勾选就是完成了，在底部显示完成状况，而且要支持一键完成。当我们有已完成的todo之后就在底部显示一个一键清除已完成的todo。这就是我们的需求。那么我们按流程来。

拆分组件

上面这个需求我们要拆分成几个组件？首先整体的组件叫App，这个不用说了。我们都知道，那么每个功能点的组件怎么拆分？

想想组件的定义：实现局部功能的代码与资源的集合。也就是说这儿个组件最小单位得是一个功能对吧？那么上面的输入框是不是一个功能？所以说输入框作为一个组件没问题吧？那么再看，中间整个todo展示的区域是不是也是一个功能？这个区域就是在展示这一系列的todo啊，但是我能不能把这个区域也拆出子组件？当然可以，我们每一个todo我们可以作为一个组件啊，每个todo的结构长得都是一样的啊。那么再往下看。底部的统计功能，这也可以是一个组件。

那么我们来总结一下我们拆分出来的组件结构

App
顶部输入框Add
中间展示区域List
- 展示区域的每条数据Item
底部统计区域Footer

实现静态组件准备工作

现在组件拆分好了，我们来实现吧首先我们来在components目录下创建我们组件对应的文件，先把组件准备好，样式什么的我们先不着急。但是我们现在还不知道组件里面要写什么，所以我们都是空组件。

那么我们现在来一个一个组件来实现我们的静态页面效果吧。

顶部输入框

我们按照页面顺序一个个来，首先是不是顶部的输入框？那么这个简单啊没有啥可说的就是一个input标签呗。

import React, { Component } from 'react';

export default class Add extends Component {
  render() {
    return (
      <div>
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" />
      </div>
    );
  }
}

我们来看一下代码，这都是我们熟悉的结构，导入相关依赖，然后定义组件。我们看一下我们的input框里面是不是有文字提示的，所以我们也要把placeholder属性也带上。那么我们在App组件中渲染Add组件是不是咋页面是就可以看见这个输入框了？我们来看一下：

输入框确实是出现了，但是这个样式跟我们的样式完全不一样啊，这是什么啊，那么我们再给加一下样式呗,就不详细介绍了。那么我们再来看一下结果：

这回看着就顺眼很多了。

底部统计区域

按照顺序我们应该先来做中间的展示列表，但是中间的展示列表是不是最麻烦的啊？我们先把简单的给实现了再说，所以我们先来写底部统计区域：

import React, { Component } from 'react'

export default class Footer extends Component {
  render() {
    return (
      <div>
        <label>
          <input type="checkbox"/>
        </label>
        <span>
          <span>已完成0</span> / 全部3
        </span>
        <button>清除已完成任务</button>
      </div>
    )
  }
}

我们来看一下代码，页面元素我们已经给完成了，一个复选框，然后我们统计有多少条数据，然后一个情况完成的数据。当然这都是静态的一些数据，当然样式我就不在详细赘述了，大家给加一下就可以了。我们来看一下静态效果：

`todo`展示列表

我们说过我们的展示区域也被拆分成了子组件，所以说我们的List组件中确实并没有什么实际内容，只要用来加子组件就好所以我们把基本的结构写好

import React, { Component } from 'react'
import Item from '../Item/Item';  

export default class List extends Component {
  render() {
    return (
      <ul>
        <Item />
      </ul>
    )
  }
}

我们来看一下这个结构，因为我们中间展示区域是一个列表，那毫无疑问就是<ul>那么中间的每一条数据都是一个<li>，但是我们每条<li>都拆成了Item组件，那么直接在List标签中添加Item标签就行了。那么我们来看Item组件

import React, { Component } from 'react'

export default class Item extends Component {
  render() {
    return (
      <li>
        <label>
          <input type="checkbox" />
          <span>xxxxx</span>
        </label>
        <button style={{ display: 'none' }}>删除</button>
      </li>
    )
  }
}

我们还是像之前一样，导入依赖，定义组件，而且我给按钮加了内联样式用来隐藏我们的这个按钮，因为我们只要鼠标移动上去的时候才展示的啊。当然了我们也顺便在把样式也加上吧。加上样式之后我们看一下效果：

诶为什么我们这里只有一条，但是下面统计有 3 条呢？这不是这都是静态的嘛。而且我们在List组件里面就只加了一次Item组件。所以说这样的话看起来确实是对不上。

到这里我们的组件的结构就已经好了，但是我们样式文件其实都写在同一个文件就是App.css中，大家可以自己来拆一下，我这里也就不在赘述了。

总结

以上便是我们的案例的静态组件的实现。

拆分组件要以功能点来作为单位进行拆分
拆分组件并不用拆得那么碎。
我们在拆分组件时尽可能将组件复用

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/todolist_static_component/