react的组件创建类型

一、类组件(有状态组件)

有props.控制状态state,可以试用生命周期函数

1. 类名称必须以大写字母开头

2. 类组件必须继承React.Component父类，从而可以使用父类中提供的方法或属性

3. 类组件必须提供render()方法

4. render()方法必须要有返回值

import React form 'react';
 
class CreatDom extends React.Component {<br>　　constructor(props){<br>　　　　super(props);<br>　　　　this.state = {<br>　　　　　　loading: true;<br>　　　　}<br>　　}<br>　　componentDidUpdate(preProps) {<br>　　　　this.setState({loading: false})<br>　　}<br>　　onClick(e) {<br>　　　　console.log(e)<br>　　}render () { return <div onClick={this.onClick}> hello word!! {this.state.loading}</div> } } export default CreatDom;

二、纯函数组件(无状态组件)

函数式定义组件没有state和生命周期函数且不能访问this，而类定义中这些都可以有。组件只需要做静态页面的展示而没有复杂的用户交互以及状态更新，我们推荐使用函数组件。

1. 函数组件名称必须以大写字母开头;

2. 函数组件必须要有返回值

export interface BreadcrumbsProps {
  items: {
    href: string;
    text: string;
  }[];
}
function Breadcrumbs(props: BreadcrumbsProps) {
  const { pathname } = useLocation();
  return (
    <BreadcrumbList>
      {props.items.map(({ href, text }) =>
        href === pathname ? (
          <span
            className={`t--breadcrumb-item ${
              href === pathname ? `active` : ``
            }`}
            key={href}
          >
            {text}
          </span>
        ) : (
          <Link
            className={`t--breadcrumb-item ${
              href === pathname ? `active` : ``
            }`}
            key={href}
            to={href}
          >
            {text}
          </Link>
        ),
      )}
    </BreadcrumbList>
  );
}
 
export default Breadcrumbs;