todoList案例使用class实现总结。

一、效果展示以及结构划分

二、如何使用 antd UI库

2.1下载 antd 到项目中

npm add antd

注意自己的网络情况，我在网络情况比较差的时候出现过下载错误。

2.2 引入 antd 中的组件到自己的页面

import React from 'react';
import { Button } from 'antd';
import './App.css';

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

2.3 修改App.css 文件

@import '~antd/dist/antd.css';

添加这一行到App.css。此时，你的页面就有了一个好看的Button。

注意我们尽可能的按需引入，减少打包后项目的体积。就像我们的案例。需要一个Button。只引入这个Button就OK。同理，当我们需要时引入其他的组件就行。

UI部分主要使用antd设计。不再多说。
需要注意的是：最后所有的css文件都会合并到一起。所以，注意你的calssName!! 理性重名

官方网站： https://ant.design/index-cn

三、数据流动

3.1目录结构

App.js

List.js

不难看出，App作为最外层的父元素，子元素有Header, Search, List 。 List 的子元素有 Item。

3.2 数据存放

我这里设计的数据状态都存放在最外层的App.js中。
状态在何处，真正操作状态的方法就在何处，只能通过setState()方法去修改state里的内容

3.3 List组件如何获取数据？（父传子-属性传值）

App.js发送数据

//定义一个todos属性，将{todos} 作为属性值传给List。
<List todos={todos} changeIsdone={this.changeIsdone} deleteTodo={this.deleteTodo}/>

List 接收数据

由于我们使用的是class设计的组件，那么class都有自己的this。所以我们再任何地方想使用父组件传递过来的属性，都可以在this.props中找，这里使用结构赋值，List组件结构出来 todos 接收到父组件传递来的数据。

3.4 组件怎么操作App.js里面的状态？ （子传父-事件）

我们拿 增加 一条 todo 为例子。
状态在哪，真正操作状态的方法就在哪
App.js 定义添加事件并将事件传递给 Search 组件

  //search 添加一条记录的方法
  addTodo = (context)=>{
    let newTodo = {id: nanoid(), context, isdone: false}
    let newTodos = [newTodo, ...this.state.todos]
    this.setState({todos:newTodos})
  }
//将事件传递给 Search 组件，将事件作为一个属性传递过去
 <Search addTodo={this.addTodo}/>

Search组件 接受并且调用

//此addTodo为 Search内部按钮的点击事件，与传递过来的无关。只是借用这个时机去调用 父组件传递来的事件
 addTodo = () => {
    if(this.input.current.input.value.trim() === '') return
    //这里才是对父组件传递来的事件的调用。
    this.props.addTodo(this.input.current.input.value)
  }

到这里，整体数据流动的两种方法就已经说完了，其他的仿照即可。

四、其它

4.1 nanoid 的使用

nanoid库和 uuid 库一样，都可以生成id。相比之下，nanoid 更轻量级。
首先下载

npm add nanoid

其次在需要使用的地方引入

import {nanoid} from 'nanoid'

最后，调用生成id即可

 const id = nanoid()

4.2 ref 也提一下

react 三大属性 ： state, props, ref。
上边简单了解了state和proprs。这里简单提一下ref的一种使用方法
Search组件中获取文本框中的文字

//注册ref
input = React.createRef()
//绑定ref
 <Input ref={this.input} ></Input>
//获取ref绑定的节点
this.input

//获取input的文本值
this.input.current.input.value

4.3<React.StrictMode>的作用（严格模式）

严格模式只检查开发模式，不影响生产模式的构建。