1. state是组件内部的状态
  2. 调用 this.setState方法修改组件状态
  3. 组件的 props 和 state都会重新 render渲染组件
    1. react组件输入的是 props和 state，输出的 jsx组件
    2. props是对外的接口，接收外部传入的数据，包括方法
      1. props是只读的，不能修改
  4. state是队内的接口，组件内部的状态变化，通过 state来控制
    1. 组件内的 state是可以修改的
    2. 不是每个组件内部都需要定义 state；组件内没有 state的可以称为 无状态组件
      1. 通常用函数组件来定义无状态组件，无状态㢟不需要关心组件 state的变化，只用于 UI展示
    3. 一个组件内部状态变化需要 state来保存，称之为有状态组件
    4. 一定要先思考：哪些组件应该设计成有状态组件，哪些为无状态组件

this.setState是同步的还是异步的

  1. 默认是异步的，对象格式
    1. 多个 setState会合并为一个 setState
  2. 既然默认是异步的，就会提供一个回调函数，来获取最新的值
    1. this.setState({ number: 2 }, () => { })
    2. 异步更新state，同步执行：回调函数同步执行
  3. 函数是同步的，在函数中获取上一个 state的值 ```jsx this.setState({ number: 0 }) // 异步，多个 setState会合并

this.setState({ number: 2 }, () => { }) // 回调函数获取最新 state值 this.setState({ number: 3 }, () => { }) this.setState({ number: 5 }, () => { }) 多个 setState，是异步的，只会执行最后一个 setState

上一个的 state 和上一个的 props this.setState((prevState, prevProps) => ({ number: prevState.number + 1 })) // 同步

setTimeout(() => { // 同步 this.setState({ number: 2 }) }, 0)

  3. <a name="lLm5l"></a>
  4. ## 组件设计思路
  6. 1. 通过定义少数的有状态组件管理整个应用的状态变化
  7. 2. 并且将状态通过 props传递给子组件
  8.    1. 子组件是无状态组件，只管 UI渲染
  9.    2. 有状态组件，有state，处理业务逻辑
  11. ![Context数据流.jpg](https://cdn.nlark.com/yuque/0/2020/jpeg/112859/1599666517845-dee58dbf-c0ba-411d-b88b-14fbc9911813.jpeg#align=left&display=inline&height=615&originHeight=1229&originWidth=1738&size=373860&status=done&style=none&width=869)
  14. <a name="ZF58D"></a>
  15. ## state特点
  17. 1. state变化会重新 render渲染组件
  18. 2. 组件的构造方法 constructor 中通过 this.state 初始化 state
  19.    1. super(props) 实际上调用了 React.Component这个 contructor方法来完成 React组件的初始化
  20.    2. constructor中，通过 this.state定义了组件的初始状态
  21. ```jsx
  22. class Parent extends React.PureComponent {
  23.     constructor (props) {
  24.     super(props)
  26.     this.state = {}
  27.   }
  28. }

render

  1. react 16之前，render必须返回一个 jsx
  2. 16+支持返回数组 & 字符串

render返回数组

  1. 返回 jsx的数组
    1. class Parent extends React.Component {
    2.  render() {
    3.    return [
    4.      <li key="A">100</li>
    5.    <li key="B">200</li>
    6.  ]
    7. }
    8. }

render里面的函数

  1. 直接在 render方法里面定义事件函数；每次 render调用前都会重新创建一个新的事件函数，额外的性能开销
  2. react中事件，采用 驼峰命名法
    1. onclick要写成 onClick， onchange要写成 onChange
  3. es6的 class不会为方法自动绑定 this
    1. 手动的 bind(this)
    2. 使用箭头函数的 静态方法