React 组件

分类

• 按照定义组件的方式分为:函数组件(Functional Component)和类组件(Class Component)
• 按照组件内是否有状态需要维护分为: 无状态组件(Stateless Component) 和有状态组件(Stateful Component)
• 按照组件的职责分为: 展示型组件(Presentational Component) 和容器型组件(Container Component)
• 当然还有其他类型的组件,比如异步组件、高阶组件

类组件

• 类组件定义有如下要求:

• 组件的名称是大写字符开头(函数组件也是)
• 类组件需要继承自 React.Component
• 类组件必须实现 render 函数
• constructor 是可选的,通常在 constructor 中初始化一些数据

函数组件

• 函数组件是使用 function来定义的函数,只是这个函数会返回和类组件中 render 函数返回一样的内容
• 函数组件的特点(使用了 hooks 的函数组件别论)

• 没有声明周期,也会被更新并挂载,但是没有生命周期函数
• 没有 this(组件实例)
• 没有内部状态(state)

render 函数的返回值

• 当 render 被调用时,它会检查 this.props 和 this.state 的变化并返回以下类型之一

• React 元素: 通常通过 jsx 创建,比如<div/>会被 React 渲染为 DOM 节点,<App/>会被 React 渲染为自定义组件, 不论是<div/>还是<App/>均为 React 元素
• 数组或 fragments:使得 render 方法可以返回多个元素
• Portals: 可以渲染子节点到不同的 DOM 子树中
• 字符串或数值类型:它们在 DOM 中会被渲染为文本节点
• 布尔类型或 null、undefine: 什么都不渲染

props类型限制和默认值

限制参数类型

• 在对子组件进行数据传递的时候,有时候我们希望对传递的数据类型进行限制,通常有两种方式

• 如果项目中默认继承了 Flow 或者 TypeScript,那么直接就可以进行类型验证
• 也可以通过 prop-types 库来进行参数验证

`import PropTypes from 'prop-types';`

使用方式有两种:
第一种:

组件名.propTypes = {
   name:PropTypes.string.isRequired, // 如果要求必传,可以使用进行限制
   age:PropTypes.number,
   friends:PropTypes.array,
   eat: PropTypes.func
}

第二种:使用 ES6的 class fields 写法

class 组件名 extends Component {
  static propTypes = {  
      name:PropTypes.string.isRequired, // 如果要求必传,可以使用进行限制
      age:PropTypes.number,
      friends:PropTypes.array,
      eat: PropTypes.func
  }
}

设置默认参数

• 设置默认参数也有两种写法

• 第一种:

组件名.defaultProps = {
   name:"zhangsan"
   age:19
}

• 第二种: 使用 ES6的 class fields 写法

class 组件名 extends Component {
  static defaultProps = {
   name:"zhangsan"
   age:19
  }
}

---

• 每个组件都有name 属性, 我们也可以通过displayName在给组件指定一个显示的名字,这个名字组要在 Reac developer tools 工具中显示,比如NewComponent.displayName = "Kobe";