image.png
image.png

React组件

image.png
组件一般不提供复杂的方法,推荐是一个纯函数,单向数据绑定。
父组件通过props传数据给子组件,子组件通过事件告诉父组件改变数据。

创建组件

image.png

  1. 创建静态UI
  2. 组件的状态
  3. 组件的交互

    单一职责原则

  4. 每个组件只做一件事

  5. 如果组件变得复杂,就应该拆分成小组件

    数据管理状态:DRY原则

  6. 能计算得到的状态就不要单独存储

  7. 组件尽量无状态,所需数据通过props获取