组件原则

减少组件之间的耦合性，让组件简单，容易理解，原则

  1. 保持接口小，porps数量要少
  2. 根据边界划分组件，充分利用组合 composition
    1. 按照数据划分边界原则
    2. 用 propTypes来定义组件的 props
    3. 避免 renderXXX的内部函数
  3. 把 state往父组件提取，让下层组件实现为纯函数
    1. 有状态的组件，组件有自己的 state
  4. 如何判断组件是否有自己的 state？？
    1. 假设组件没有 state，定义为函数形式的无状态组件
    2. state是组件内部状态，只能通过组件自己来更新
    3. 确定了组件结构和 state后，剩下的就是 props设计
  5. 不大可能一次就写出完美的代码，软件开发是个逐渐精进的过程，应该让组件达到这样的要求
    1. 功能正常
    2. 代码整洁
    3. 高性能

有状态组件

react组件就是软件设计中的模块

  1. 一个组件就是一个独立的文件，然后用 export default 导出这个组件
  2. 任何 jsx都需要 import React from 'react'
  3. 有状态的组件 state，不能用 函数组件
  4. state需要初始化

秒表组件

  1. 组件框架 ```jsx // 父组件：容器组件 class StopWatch extends React.PureComponent { render() {
    1.  return (
    2.      <>
    3.      <MajorClock />
    4.      <ControllerButton />
    5.      <SplitTimes />
    6.    </>
    7.  )
    } }

// 子组件 const MajorClock = (props) => { // 返回秒表的 jsx }

const ControllerButton = (props) => { // 返回2个按钮 }

const SplitTimes = (props) => { // 返回计次所有的时间；要用一个数组来存放时间 }

  3. 2. 组件代码
  4. ```jsx
  5. // 父组件
  6. class StopWatch extends React.PureComponent {
  7.     render() {
  8.         return (
  9.             <MajorClock />
  10.             <ControllerButton />
  11.             <SplitTimes />
  12.         )
  13.     }
  14. }
  16. // 子组件
  17. const MajorClock = (props) => {
  18.     // 返回秒表的 jsx
  19.     const { milliseconed=0 } = props
  20.     reutrn (
  21.         <h1>{ ms2Time(millisecond) }</h1>
  22.     )
  23. }
  24. MajorClock.propTypes = {
  25.     milliseconds: PropTypes.number.isRequired
  26. }
  29. // 返回2个按钮
  30. const ControllerButton = (props) => {
  31.     const { actived, onStart, onReset, onPause, onSplit } = props
  32.     // actived true 返回计次和停止
  33.     if (actived) {
  34.         return (
  35.             <div>
  36.                 <Button onClick={onSplit}>计次</Button>
  37.                 <Button onClick={onPause}>停止</Button>
  38.             </div>
  39.         )
  40.     }
  42.     // actived false 返回复位和启动
  43.     return (
  44.         <div>
  45.             <Button onClick={onReset}>复位</Button>
  46.             <Button onClick={onStart}>启动</Button>
  47.         </div>
  48.     )
  49. }
  50. ControllerButton.propTypes = {
  51.     actived: PropTypes.bool,
  52.     onStart: PropTypes.func.isRequired,
  53.     onPause: PropTypes.func.isRequired,
  54.     onSplit: PropTypes.func.isRequired,
  55.     onReset: PropTypes.func.isRequired,
  56. }
  60. //  返回计次所有的时间；要用一个数组来存放时间
  61. const SplitTimes = (props) => {
  63. }
  65. SplitTimes.propTypes = {
  66.     splits: PropTypes.arrayOf(PropTypes.number)
  67. }

ms2Time

  1. // ms2Time
  2. export const ms2Time = millisecond => {
  3.     let time = millisecond
  5.     // 毫秒
  6.     const ms = time % 1000
  7.     time = (milliseconds - ms) / 1000
  9.      // 秒
  10.     const seconds = time % 60
  11.     time = (time - seconds) / 60
  13.     // 小时
  14.     const minutes = time % 60
  15.     const hours = (time - minutes) / 60
  17.     // 时 分 秒
  18.     const fulltime = padStart(hour, 2, '0') + ':' + padStart(minutes,2 '0') + ':' + padStart(seconds, 3, '0')
  19. }