React开发可复用组件

1、prop类型
（1）如果希望整个引用可以复用组件，关键要确保清晰的定义组件及其参数，以便能够直观使用。
React提供了一个非常简单的表达组件接口的强大工具，只要提供组件期望接收的prop名称与对应的验证规则即可。

import React from 'react';
import PropTypes from 'prop-types';

export default function Button({text}){
    return <button>{text}</button>
}

Button.propTypes = {
    text: PropTypes.string
}

如果传入的text值不是string类型，浏览器会报一个警告

（2）对象类型定义，如下定义user对象，name和subName都是string类型

import React from 'react';
import PropTypes from 'prop-types';

export default function Button({text, user}){
    return (
        <div>
            <div>{user.name}</div>
            <div>{user.subName}</div>
            <button>{text}</button>
        </div>
    )
}

Button.propTypes = {
    text: PropTypes.string,
    user: PropTypes.shape({
        name: PropTypes.string.isRequired,
        subName: PropTypes.string
    }).isRequired
}

（3）自定义函数校验，对user对象中age属性进行校验，只能大于0与100之间

Button.propTypes = {
    text: PropTypes.string,
    user: PropTypes.shape({
        name: PropTypes.string.isRequired,
        subName: PropTypes.string,
        age:(props, propName) => {
            if (props[propName] < 0 || props[propName] >=100) {
                return new Error(`${propName} must be betwwen 1 and 99`)
            }
            return null
        }
    }).isRequired
}

如果不满足条件则报错，如下

（3）基于以上prop类型，组件的边界已经定义的很清晰了，我们可以进行另一个操作，以便它们更易使用和共享，开发人员能够充分利用这些公共组件，react-docgen库可以为组件自动生成文档
首先执行命令npm install --global react-docgen 安装插件
再执行命令react-docgen Button.jsx，结果如下，将button的props定义生成了一个json文档，方便其他开发人员阅读

Button.propTypes = {
    text: PropTypes.string,
    /**
     * 用户对象
     */
    user: PropTypes.shape({
        /**
         * 用户名称
         */
        name: PropTypes.string.isRequired,
        subName: PropTypes.string
    }).isRequired
}

{
  "description": "",
  "displayName": "Button",
  "methods": [],
  "props": {
    "text": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "user": {
      "type": {
        "name": "shape",
        "value": {
          "name": {
            "name": "string",
            "description": "用户名称",
            "required": true
          },
          "subName": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": true,
      "description": "用户对象"
    }
  }
}

2、逻辑组件与表现组件分离
逻辑组件：
（1）负责渲染对应的表现组件
（2）发起API请求并操作数据
（3）定义事件处理器
表现组件：
（1）负责渲染HTML标记
（2）以props的形式从父组件接收数据
（3）通常写作无状态函数式组件
3、高阶组件