1. props-类型校验

校验接收的props的数据类型，增加组件的稳健性
大致步骤：

  • 理解props都是外来的，在使用的时候如果数据类型不对，很容易造成组件内部逻辑出错
  • 通过 prop-types 可以在创建组件的时候进行类型检查，更合理的使用组件避免错误

具体内容：

  1. 理解props都是外来的，在使用的时候如果数据类型不对，很容易造成组件内部逻辑出错

// 开发者A创建的组件
const List = props => {
const arr = props.colors
const lis = arr.map((item, index) =>

  • {item.name}
    • )
    return (
      {lis}

    )
    }

    // 开发者B去使用组件

    报错：TypeError: arr.map is not a function

    1. 通过 prop-types 可以在创建组件的时候进行类型检查，更合理的使用组件避免错误
      • 安装 yarn add prop-types
      • 导入 import PropTypes from ‘prop-types’
      • 使用 组件名.propTypes = { ‘props属性’:’props校验规则’ } 进行类型约定，PropTypes 包含各种规则

    import PropTypes from ‘prop-types’

    const List = props => {
    const arr = props.colors
    const lis = arr.map((item, index) =>

  • {item.name}
    • )
    return
      {lis}

    }

    List.propTypes = {
    // props属性：校验规则
    colors: PropTypes.array
    }
    总结：

    • 在提供组件的时候，props校验可以让组件使用更加准确。

      2. props-类型校验常见类型

      了解react组件props校验的常见规则
      大致步骤：

    • 了解常见的校验规则

    • 演示校验规则的使用

    具体内容：

    • 了解常见的校验规则
      1. 常见类型：array、bool、func、number、object、string
      2. React元素类型：element
      3. 必填项：isRequired
      4. 特定结构的对象：shape({})
    • 演示校验规则的使用

    const Demo = (props) => {
    return

    Demo组件

    }
    Demo.propTypes = {
    // 常见类型
    optionalFunc: PropTypes.func,
    // 常见类型+必填
    requiredFunc: PropTypes.func.isRequired,
    // 特定结构的对象
    optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
    })
    }
    总结：

    • 通过PropTypes可以得到常见的校验规则

      3. props-默认值

      给组件的props提供默认值
      大致步骤：

    • 知道 defaultProps 的作用？

    • 演示如何设置props的默认值
    • 新版react推荐使用参数默认值来实现

    具体内容：

    1. 知道 defaultProps 的作用
      • 给组件的props设置默认值，在未传入props的时候生效
    2. 如何设置props的默认值参考代码

    // 分页组件
    const Pagination = (props) => {
    return

    pageSize的默认值：{props.pageSize}

    }
    // 设置默认值
    Pagination.defaultProps = {
    pageSize: 10
    }
    // 使用组件

    1. 新版react推荐使用参数默认值来实现

    // 分页组件
    const Pagination = ({pageSize = 10}) => {
    return

    pageSize的默认值：{pageSize}

    }
    // 使用组件

    总结：

    • 组件名称.defaultProps 可以设置props属性默认值，未传的时候使用

    • 新版 react 更推荐 参数默认值 来实现

      4. props-静态属性写法

      知道在类组件中如何设置 类型校验 和 默认值
      大致步骤：

    • 类的静态属性写法和如何访问它

    • 类组件中 propTypes defaultProps 的使用代码参考

    具体内容：

    1. 类的静态属性写法和如何访问它
      • 实例属性需要实例化后，通过实例访问
      • 静态属性，可以通过类直接访问

    class Person {
    // 实例属性
    gender = ‘男’
    // 静态属性
    static age = 18
    }
    // 访问静态属性
    console.log(Person.age) // 18
    // 访问实例属性
    const p = new Person()
    console.log(p.gender) // 男

    1. 类组件中 propTypes defaultProps 的使用代码参考

    class Demo extends Component {
    // 校验
    static propTypes = {
    colors: PropTypes.array,
    gender: PropTypes.oneOf([‘男’, ‘女’]).isRequired
    }
    // 默认值
    static defaultProps = {
    gender: ‘男’
    }

    render() {
    return

    Demo组件

    }
    }
    总结：

    • 在类组件中通过 static propTypes = {} 定义props校验规则 static defaultProps = {} 定义props默认值

      5. 生命周期-概览

      了解react类组件生命周期整体情况
      大致步骤：

    • 什么是生命周期

    • React类组件的生命周期整体概览
    • 了解生命周期的意义

    具体内容：

    1. 什么是组件生命周期
      • 一个事物从创建到最后消亡经历的整个过程

    image.png

    1. React类组件的生命周期整体概览，组件从创建到消耗的过程

    React组件生命周期
    image.png

    1. 了解生命周期的意义
      • 助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因
      • 钩子函数为开发人员在不同阶段操作组件提供了时机

    总结：

    • 只有类组件才有生命周期，分为 挂载阶段 更新阶段 卸载阶段

      6. 生命周期-挂载阶段

      够说出组件的挂载阶段的钩子函数以及执行时机
      大致步骤：

    • 知道挂载阶段会执行那些函数，执行顺序

    • 知道每个函数内一般可以做什么事
    • 参考代码

    具体内容：

    1. 知道挂载阶段会执行那些函数，执行顺序

    image.png

    1. 知道每个函数内一般可以做什么事 | 钩子 函数 | 触发时机 | 作用 | | —- | —- | —- | | constructor | 创建组件时，最先执行 | 1. 初始化state 2. 创建 Ref 3. 使用 bind 解决 this 指向问题等 | | render | 每次组件渲染都会触发 | 渲染UI（注意： 不能调用setState() ） | | componentDidMount | 组件挂载（完成DOM渲染）后 | 1. 发送网络请求 2.DOM操作 |

    |

    1. 参考代码

    import { Component } from ‘react’

    export default class App extends Component {
    constructor () {
    super()
    console.log(‘1. constructor执行’)
    }
    componentDidMount () {
    console.log(‘3. componentDidMount执行’)
    }
    render() {
    console.log(‘2. render执行’)
    return

    App组件

    }
    }
    总结：

    • 组件挂载阶段，顺序执行 constructor render componentDidMount 三个函数

      7. 生命周期-更新阶段

      能够说出组件的更新阶段的钩子函数以及执行时机
      大致步骤：

    • 知道更新阶段会执行那些函数，执行顺序

    • 知道何时触发更新阶段
    • 知道触发的钩子函数里可以做些什么
    • 参考代码

    具体内容：

    1. 更新阶段会执行那些函数，执行顺序

    image.png

    1. 何时触发更新阶段
      1. setState()
      2. forceUpdate() 强制组件更新
      3. 组件接收到新的props（实际上，只需要父组件更新，子组件就会重新渲染）

    2. 钩子函数里可以做什么 | 钩子函数 | 触发时机 | 作用 | | —- | —- | —- | | render | 每次组件渲染都会触发 | 渲染UI（与 挂载阶段 是同一个render） | | componentDidUpdate | 组件更新（完成DOM渲染）后 | DOM操作，可以获取到更新后的DOM内容，不要直接调用setState |

    3. 参考代码

    import { Component } from ‘react’

    class Child extends Component {
    render() {
    return

    统计豆豆被打的次数：


    }
    }

    export default class App extends Component {
    state = {
    count: 0
    }

    handleClick = () => {
    this.setState({
    count: this.state.count + 1
    })
    }

    componentDidUpdate() {
    console.log(‘2. componentDidUpdate执行’)
    }

    render() {
    console.log(‘1. render执行’)
    return (




    )
    }
    }
    总结：

    • 组件更新会触发 componentDidUpdate 钩子函数

      8. 生命周期-卸载阶段

      能够说出组件的销毁阶段的钩子函数以及执行时机
      大致步骤：

    • 什么时候触发卸载

    • 卸载阶段执行那些钩子函数，一般做什么事情
    • 参考代码
    • 演示清理工作

    具体内容：

    1. 什么时候触发卸载？
      • 在组件被移除的时候（消失）触发卸载阶段

    2. 卸载阶段执行那些钩子函数，一般做什么事情 | 钩子函数 | 触发时机 | 作用 | | —- | —- | —- | | componentWillUnmount | 组件卸载（从页面中消失） | 执行清理工作（比如：清理定时器等） |

    3. 参考代码

    import { Component } from ‘react’

    class Child extends Component {
    componentWillUnmount () {
    console.log(‘componentWillUnmount执行’)
    }
    render() {
    return

    统计豆豆被打的次数：{this.props.count}


    }
    }

    export default class App extends Component {
    state = {
    count: 0
    }

    handleClick = () => {
    this.setState({
    count: this.state.count + 1
    })
    }

    render() {
    return (

    { this.state.count < 5 && }


    )
    }
    }
    总结：

    • 组件卸载阶段执行 componentWillUnmount, 可以清理全局事件、定时器等。

      9. 生命周期 - 练习

      能够实现youku评论列表案例的数据持久化
      大致步骤：
    1. 在组件挂载的钩子函数中，从本地存储中读取 list 数据
    2. 将读取到的 list 数据，更新到状态中
    3. 在组件更新的钩子函数中，将最新的 list 数据存到本地存储中

    核心代码：
    componentDidUpdate() {
    localStorage.setItem(‘comments’, JSON.stringify(this.state.comments))
    }

    componentDidMount() {
    const comments = JSON.parse(localStorage.getItem(‘comments’) || ‘[]’)
    this.setState({ comments })
    }
    总结： 掌握生命周期的基本运用

    10. setState扩展-发现问题

    发现setState是“异步”的，多次setState会合并。
    大致步骤：

    • 理解setState是“异步”的，理解setState会合并更新
    • React这么处理的好处是什么？

    具体内容：

    1. 理解setState是“异步”的，理解setState会合并更新
      • 调用 setState 时，将要更新的状态对象，放到一个更新队列中暂存起来（没有立即更新）
      • 如果多次调用 setState 更新状态，状态会进行合并，后面覆盖前面
      • 等到所有的操作都执行完毕，React 会拿到最终的状态，然后触发组件更新

    Demo组件：0
    体现“异步”和合并

    1. React这么处理的好处是什么？
      • “异步” 更新，或者做延时更新，为了等所有操作结束后去更新
      • 合并更新，是将多次setState合并，然后进行更新
      • 都是为了提高渲染性能

    总结：

    • setState函数具有 “异步” 和 合并 的特点，目的为了提高渲染性能。

      11. setState扩展-更多用法

      掌握setState的更多用法，让数据串联更新，等待数据页面更新。
      大致步骤：

    • 多次使用setState让数据串联使用的写法

    • 调用setState后页面更新后执行逻辑写法

    具体内容：

    1. 多次使用setState让数据串联使用的写法

    Demo组件：0
    setState串联更新数据

    1. 调用setState后页面更新后执行逻辑写法

    Demo组件：0
    setState更新后执行逻辑

    总结：

    • 使用 setState((prevState) => {}) 语法，可以解决多次调用状态依赖问题

    • 使用 setState(updater[, callback]) 语法，在状态更新（页面完成重新渲染）后立即执行某个操作

      12. setState扩展-异步OR同步

      能够说出setState到底是同步的还是异步
      大致步骤：

    • 了解为啥会出现“异步”现象

    • 知道何时出现“异步”，知道何时出现同步

    具体内容：

    1. 为啥会出现“异步”现象
      • setState本身并不是一个异步方法，其之所以会表现出一种“异步”的形式，是因为react框架本身的一个性能优化机制
      • React会将多个setState的调用合并为一个来执行，也就是说，当执行setState的时候，state中的数据并不会马上更新
    2. 知道何时出现“异步”，知道何时出现同步
      • setState如果是在react的生命周期中或者是事件处理函数中，表现出来为：延迟合并更新（“异步更新”）
      • setState如果是在setTimeout/setInterval或者原生事件中，表现出来是：立即更新（“同步更新”）

    Demo组件：0
    同步OR异步

    总结：

    • 在react事件函数或者生命周期函数表现“异步”，在定时器或者原生事件中表现同步。

      13. todomvc案例-模拟接口

      使用json-server创建接口服务支持案例
      大致步骤：

    • 全局安装json-server

    • 新建 db.json 文件
    • 启动接口服务
    • 接口地址列表

    具体内容：

    1. 全局安装json-server

    npm i json-server -g

    1. 新建 db.json 文件，内容如下

    {
    “todos”: [
    {“id”:1,”name”:”吃饭”,”done”:true},
    {“id”:2,”name”:”睡觉”,”done”:false}
    ]
    }

    1. 启动服务,在db.json文件目录下执行

    json-server db.json
    # 设置端口
    # json-server db.json —port 5000

    1. 接口地址列表

    GET /todos 获取列表
    POST /todos 添加任务，参数 name 和 done
    GET /todos/:id 获取任务，参数 id
    DELETE /todos/:id 删除任务，参数 id
    PUT /todos/:id 修改任务，参数 name 和 done , 完整更新
    PATCH /todos/:id 修改任务，参数 name 或 done , 局部更新

    14. todomvc案例-静态结构

    根据git仓库todomvc提供的资源搭建静态案例
    TODOMVC官网：https://todomvc.com/
    资源列表：

    html,
    body {
    margin: 0;
    padding: 0;
    }

    button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 100%;
    vertical-align: baseline;
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

    body {
    font: 14px ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
    line-height: 1.4em;
    background: #f5f5f5;
    color: #111111;
    min-width: 230px;
    max-width: 550px;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 300;
    }

    .hidden {
    display: none;
    }

    .todoapp {
    background: #fff;
    margin: 130px 0 40px 0;
    position: relative;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
    0 25px 50px 0 rgba(0, 0, 0, 0.1);
    }

    .todoapp input::-webkit-input-placeholder {
    font-style: italic;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
    }

    .todoapp input::-moz-placeholder {
    font-style: italic;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
    }

    .todoapp input::input-placeholder {
    font-style: italic;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
    }

    .todoapp h1 {
    position: absolute;
    top: -140px;
    width: 100%;
    font-size: 80px;
    font-weight: 200;
    text-align: center;
    color: #b83f45;
    -webkit-text-rendering: optimizeLegibility;
    -moz-text-rendering: optimizeLegibility;
    text-rendering: optimizeLegibility;
    }

    .new-todo,
    .edit {
    position: relative;
    margin: 0;
    width: 100%;
    font-size: 24px;
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.4em;
    color: inherit;
    padding: 6px;
    border: 1px solid #999;
    box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

    .new-todo {
    padding: 16px 16px 16px 60px;
    height: 65px;
    border: none;
    background: rgba(0, 0, 0, 0.003);
    box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
    }

    .main {
    position: relative;
    z-index: 2;
    border-top: 1px solid #e6e6e6;
    }

    .toggle-all {
    width: 1px;
    height: 1px;
    border: none; / Mobile Safari /
    opacity: 0;
    position: absolute;
    right: 100%;
    bottom: 100%;
    }

    .toggle-all + label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 65px;
    font-size: 0;
    position: absolute;
    top: -65px;
    left: -0;
    }

    .toggle-all + label:before {
    content: ‘❯’;
    display: inline-block;
    font-size: 22px;
    color: #949494;
    padding: 10px 27px 10px 27px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    }

    .toggle-all:checked + label:before {
    color: #484848;
    }

    .todo-list {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    .todo-list li {
    position: relative;
    font-size: 24px;
    border-bottom: 1px solid #ededed;
    }

    .todo-list li:last-child {
    border-bottom: none;
    }

    .todo-list li.editing {
    border-bottom: none;
    padding: 0;
    }

    .todo-list li.editing .edit {
    display: block;
    width: calc(100% - 43px);
    padding: 12px 16px;
    margin: 0 0 0 43px;
    }

    .todo-list li.editing .view {
    display: none;
    }

    .todo-list li .toggle {
    text-align: center;
    width: 40px;
    / auto, since non-WebKit browsers doesn’t support input styling /
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    border: none; / Mobile Safari /
    -webkit-appearance: none;
    appearance: none;
    }

    .todo-list li .toggle {
    opacity: 0;
    }

    .todo-list li .toggle + label {
    /
    Firefox requires # to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
    IE and Edge requires     everything to be escaped to render, so we do that instead of just the # - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
    /
    background-image: url(‘data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E’);
    background-repeat: no-repeat;
    background-position: center left;
    }

    .todo-list li .toggle:checked + label {
    background-image: url(‘data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E’);
    }

    .todo-list li label {
    word-break: break-all;
    padding: 15px 15px 15px 60px;
    display: block;
    line-height: 1.2;
    transition: color 0.4s;
    font-weight: 400;
    color: #484848;
    }

    .todo-list li.completed label {
    color: #949494;
    text-decoration: line-through;
    }

    .todo-list li .destroy {
    display: none;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    width: 40px;
    height: 40px;
    margin: auto 0;
    font-size: 30px;
    color: #949494;
    transition: color 0.2s ease-out;
    }

    .todo-list li .destroy:hover,
    .todo-list li .destroy:focus {
    color: #C18585;
    }

    .todo-list li .destroy:after {
    content: ‘×’;
    display: block;
    height: 100%;
    line-height: 1.1;
    }

    .todo-list li:hover .destroy {
    display: block;
    }

    .todo-list li .edit {
    display: none;
    }

    .todo-list li.editing:last-child {
    margin-bottom: -1px;
    }

    .footer {
    padding: 10px 15px;
    height: 20px;
    text-align: center;
    font-size: 15px;
    border-top: 1px solid #e6e6e6;
    }

    .footer:before {
    content: ‘’;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 50px;
    overflow: hidden;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
    0 8px 0 -3px #f6f6f6,
    0 9px 1px -3px rgba(0, 0, 0, 0.2),
    0 16px 0 -6px #f6f6f6,
    0 17px 2px -6px rgba(0, 0, 0, 0.2);
    }

    .todo-count {
    float: left;
    text-align: left;
    }

    .todo-count strong {
    font-weight: 300;
    }

    .filters {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    right: 0;
    left: 0;
    }

    .filters li {
    display: inline;
    }

    .filters li a {
    color: inherit;
    margin: 3px;
    padding: 3px 7px;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 3px;
    }

    .filters li a:hover {
    border-color: #DB7676;
    }

    .filters li a.selected {
    border-color: #CE4646;
    }

    .clear-completed,
    html .clear-completed:active {
    float: right;
    position: relative;
    line-height: 19px;
    text-decoration: none;
    cursor: pointer;
    }

    .clear-completed:hover {
    text-decoration: underline;
    }

    .info {
    margin: 65px auto 0;
    color: #4d4d4d;
    font-size: 11px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    text-align: center;
    }

    .info p {
    line-height: 1;
    }

    .info a {
    color: inherit;
    text-decoration: none;
    font-weight: 400;
    }

    .info a:hover {
    text-decoration: underline;
    }

    /
    Hack to remove background from Mobile Safari.
    Can’t use it globally since it destroys checkboxes in Firefox
    /
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    .toggle-all,
    .todo-list li .toggle {
    background: none;
    }

    .todo-list li .toggle {
    height: 40px;
    }
    }

    @media (max-width: 430px) {
    .footer {
    height: 50px;
    }

    .filters {
    bottom: 10px;
    }
    }

    :focus,
    .toggle:focus + label,
    .toggle-all:focus + label {
    box-shadow: 0 0 2px 2px #CF7D7D;
    outline: 0;
    }



    todos


    className=”new-todo”
    placeholder=”What needs to be done?”
    autoFocus
    />

























    react组件准备：

    • 创建 index.css 把css拷贝进去
    • 创建 App.js 组件，把html使用起来

    import React, { Component } from ‘react’;
    import ‘./index.css’
    export default class App extends Component {
    render() {
    return (



    todos


    className=”new-todo”
    placeholder=”What needs to be done?”
    autoFocus
    />

























    );
    }
    }

    15. todomvc案例-列表渲染

    完成组件的拆分和列表渲染
    大致步骤：

    • 拆分组件
    • 安装axios，在App组件获取数据，传人Main渲染即可

    具体代码：

    1. 拆分组件

    App.jsx
    import React, { Component } from “react”;
    import Footer from “./components/Footer”;
    import Header from “./components/Header”;
    import Main from “./components/Main”;

    export default class App extends Component {
    render() {
    return (






    );
    }
    }
    components/Header.jsx
    import React, { Component } from “react”;

    export default class Header extends Component {
    render() {
    return (

    todos


    className=”new-todo”
    placeholder=”What needs to be done?”
    autoFocus
    />

    );
    }
    }
    components/Main.jsx
    const Main = () => {
    return (






















    );
    };

    export default Main;
    components/Footer.jsx
    const Footer = () => {
    return (

    );
    };

    export default Footer;

    1. 安装axios，在App组件获取数据，传人Main渲染即可

    App.jsx
    import React, { Component } from “react”;
    import Footer from “./components/Footer”;
    import Header from “./components/Header”;
    import Main from “./components/Main”;
    import axios from “axios”;

    export default class App extends Component {
    state = {
    list: [],
    };
    async componentDidMount() {
    const res = await axios.get(“http://localhost:5000/todos“);
    this.setState({ list: res.data });
    }
    render() {
    return (






    );
    }
    }
    components/Main.jsx
    import PropTypes from ‘prop-types’
    const Main = (props) => {
    return (




      {props.list.map((item) => (


    • {}} />





      • ))}


    );
    };
    Main.propTypes = {
    list: PropTypes.array
    }

    export default Main;

    16. todomvc案例-添加任务

    完成添加任务功能
    大致步骤：

    • Header组件
      • 绑定输入内容数据
      • enter后拿着内容，发送添加请求
      • 清空输入内容
      • 更新列表
    • App组件
      • 提供更新列表函数，传递给Header组件使用

    落地代码：
    App组件
    componentDidMount() {
    this.getTodoList()
    }
    getTodoList = async () => {
    const res = await axios.get(“http://localhost:5000/todos“);
    this.setState({ list: res.data });
    }
    render() {
    return (






    );
    }
    Header组件
    import React, { Component } from “react”;
    import axios from “axios”;
    import PropTypes from ‘prop-types’

    export default class Header extends Component {

    static propTypes = {
    getTodoList: PropTypes.func.isRequired
    }

    state = {
    todoName: “”,
    };

    onChange = (e) => {
    this.setState({
    todoName: e.target.value,
    });
    };

    add = async (e) => {
    if (e.keyCode === 13) {
    const name = this.state.todoName.trim();
    if (name) {
    await axios.post(“http://localhost:5000/todos“, { name, done: false });
    this.setState({ todoName: “” });
    this.props.getTodoList();
    }
    }
    };

    render() {
    return (

    todos


    className=”new-todo”
    placeholder=”What needs to be done?”
    autoFocus
    value={this.state.todoName}
    onChange={this.onChange}
    onKeyUp={this.add}
    />

    );
    }
    }

    17. todomvc案例-修改状态&删除任务

    完成修改状态功能&删除任务
    大致步骤：

    • Main组件
      • 绑定checkbox的onChang事件，触发后发修改请求
      • 绑定button的点击事件，触发后发删除请求
      • 成功后更新列表
    • App组件
      • 传入更新列表函数

    落地代码：Main组件
    import PropTypes from “prop-types”;
    +import axios from “axios”;
    const Main = (props) => {
    + const updateDone = async (id, done) => {
    + await axios.patch(http://localhost:5000/todos/${id}, { done });
    + props.getTodoList()
    + };
    + const del = async (id) => {
    + await axios.delete(http://localhost:5000/todos/${id});
    + props.getTodoList()
    + }
    return (





      {props.list.map((item) => (


    • className=”toggle”
      type=”checkbox”
      checked={item.done}
      + onChange={() => updateDone(item.id, !item.done)}
      />

      +



      • ))}


    );
    };
    Main.propTypes = {
    list: PropTypes.array.isRequired,
    + getTodoList: PropTypes.func.isRequired,
    };

    export default Main;
    App组件


    +


    18. 今日总结

    1. props如何进行类型校验？
      • propTypes属性和prop-types库提供的校验规则
    2. props如何设置默认值？
      • defaultProps属性可以设置，新版react推下参数默认值
    3. props校验和默认值在类组件中写法？
      • static propsTypes = {} 和 static defaultProps = {}
    4. react组件生命周期分为几个阶段？
      • 挂载阶段，更新阶段，卸载阶段
    5. 挂载阶段执行那些函数，顺序是？
      • constructor render componentDidMount
    6. 更新阶段执行那些函数，顺序是？
      • render componentDidUpdate
    7. 卸载阶段执行函数？
      • componentWillUnmount 可以做清理工作
    8. setState传函数写法，作用？
      • setState(prevState=>{}) 可以基于上一次状态进行修改，不合并状态
    9. setState回调函数写法，作用？
      • setState(prevState=>{},()=>{}) 回调函数再更新完毕后执行
    10. setState是异步OR同步
      • 在react的事件函数和生命周期函数中表现“异步”延迟执行，其他地方是同步