1、片段Fragment的使用
2、strictMode（严格模式的使用）
- 2.1 严格模式的特点:
- 2.2 严格模式检查的是什么？
3、React中的CSS样式
4、class添加的相关方法
- 4.1 在vue中给标签添加class类名
- 4.2 在react中给标签添加class类名

1、片段Fragment的使用

在之前的开发中，我们总是在一个组件中返回内容时包裹一个div元素：

import React, { PureComponent, Fragment } from 'react'
// 当我们不需要的外层包裹一个dom结构的时候 可以使用Fragment片段 可使用<></>语法糖进行简写
export default class App extends PureComponent {
  render() {
    return (
      // <Fragment>
      //   <p>文章片段</p>
      //   <h2>二级标题</h2>
      // </Fragment>
      <>
        <p>文章片段</p>
        <h2>二级标题</h2>
      </>
    )
  }
}

我们又希望可以不渲染这样一个div应该如何操作呢？

使用Fragment
Fragment 允许你将子列表分组，而无需向DOM添加额外节点

React还提供了Fragment的短语法形式

它看起来像空标签<></>
但是，如果我们需要在Fragment中添加key，那么就不能使用短语法（在数组和列表的循环中需要绑定key值的时候）

当Fragment绑定key值的时候，不可以使用语法糖(不能使用短语法)

import React, { PureComponent, Fragment } from 'react'
// 当我们不需要的外层包裹一个dom结构的时候 可以使用Fragment片段 可使用<></>语法糖进行简写
export default class App extends PureComponent {
  constructor(props) {
      super(props)
    this.state = {
        todoList: [
        { id: 110, name: '吃饭' },
        { id: 111, name: '睡觉' },
        { id: 112, name: '打豆豆' },
      ]
    }
  }
  render() {
    return (
      <div>
          <h2>待办事项</h2>
        <div>
            this.state.todoList.map(item => {
              return (
              // 不可以使用<></>来绑定key值 这里是有问题的
                <Fragment key={ item.id }>
                <span>id-{ item.id }</span>
                <span>项目-{ item.name }</span>
              </Fragment>
            )
          })
        </div>
      </div>
    )
  }
}