函数组件

函数式组件是一个只接收props并返回JSX元素的render 函数。这意味着他们没有任何状态，这也就意味着他刷新一次里面的数据就没了，概念类似于一帧一帧，并且只负责渲染传递给它们的数据。

代码简洁，易于阅读
没有状态，避免了许多生命周期方法的使用
更容易编写和测试
可以轻松转换为 React Hooks

适合展示静态页面，或者数据从父组件传到子组件进行展示的话

例如所有的图表都由无状态组件写（函数组件、Hooks），因为它们只负责拿到数据并渲染。并无自己维护的状态。

在已经熟悉 React Hooks 并希望从旧项目升级到新的 API 时，函数式组件也很有用。

React.FC组件函数化（传参）

const GridItem: React.FC<{
    index: number,//必须提供number值
    defaultOptions?: number,//不必提供值，若提供必为number
    onGridBlur: () => any
//为GridItem组件传入参数
}> = ({ index,defaultOptions,onGridBlur }) => {
    const [status, setStatus] = useState(false)

    let size = options.length;
    const getIcon = () => {
        return <MinusCircleOutlined style={
   
   { color: "red" }} />;
    }

    return (
//字符串模板字面量:字符串拼接变量'str${}'
        <div key={`gridItem${Math.random()}`}>
            <div key={`div${Math.random()}`}>
                <Select
                    key={`sel${Math.random()}`}
                    defaultValue={defaultOptions}
                    onChange={(value, item: any) => {
                        onChange(item, index);
                    }}
                    onBlur={() => {
                        onGridBlur();
                    }}
                />
        </div >
    );
}

export default GridItem;

类组件

可以使用状态和生命周期函数
适用于组件有复杂的业务逻辑，或涉及 I/O 操作，例如调用 API
不同组件之间共享数据
更复杂的状态管理和生命周期方法调用


import React, { PureComponent, RefObject } from "react";
import { Layout, Menu, Tabs, Button, Form, Select, DatePicker} from 'antd';
import { FormInstance } from "antd";
import { JSX } from "react/jsx-runtime";

import "./App.css";

import { judgeSuccess, getDate,DATA_APIS, PARAMS_API, TABS, RANGE_PRESETS,LAST_WEEK} from "./utils/AppUtil";

import ListChart from "./components/ListChart";

const { Header } = Layout;
const { Option } = Select;
const { RangePicker } = DatePicker;

export default class App extends PureComponent<any, any, any>  {
  eChartsRef: RefObject<HTMLDivElement>;
  formRef:RefObject<FormInstance>;
  jsonUrl: string[];
  jsonMsgs: Map<string, any>;
  fromValues: any;
  isError:boolean;

  constructor(props: any) {
    super(props);
    this.eChartsRef = React.createRef();
    this.formRef=React.createRef()
    this.jsonUrl = [];// CPU_BPU,FPS_Delay_Mem,DSP
    this.jsonMsgs = new Map();
    this.fromValues={
      proj:'',
      comp:'',
      mode:'',
      dates:null,
    }
    this.isError=false;
    this.state = {
      formItemDoms: [],
      pref_items: [
        {
        },
      ],//TabsProps['items'];
    }
  };

  requestParams = () => {
    fetch(PARAMS_API, { method: 'GET' })
      .then(function (response) {
        return response.json();
      })
      .then((data) => {
        if (judgeSuccess(data) && data.data.proj?.proj_list) {
          this.initialFormItems(data.data)     
        }
      }).catch(error => {
        console.error('Error:', error);
        if(!this.isError){
          this.isError=true;
          alert(`发生错误:${error}，请在控制台查看详情原因`);
        }
      });
  }

  getOption = (list: string[]) => {
    let doms: JSX.Element[] = [];
    list.forEach((val: string) => {
      doms.push(<Option value={val} key={`${val}`} >{val}</Option >);
    });
    return doms;
  }


  requestData = async (values: any) => {
    Promise.all(
      this.jsonUrl.map(url => fetch(url, { method: 'GET' }))
    )
      .then(async ([res1, res2, res3]) => {
        return [await res1.json(), await res2.json(), await res3.json()];
      }).then((datas) => {
        datas.forEach((data) => {
          this.jsonMsgs.set(data.data.data_type, data);
          if (this.jsonMsgs.size === 3) {
            this.setData();
          }
        })
      }).catch(errors => {
          console.error('Error:', errors);
          alert(`请求失败，发生错误:${errors}，请在控制台查看详情原因`);
      });
  }

  render(): React.ReactNode {
    return (
      <>
          {this.state.formItemDoms}

      </>
    );
  }

  componentDidMount() {
    this.requestParams();
  }
  componentDidUpdate(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any): void {
    this.isError=false;
  }
};

类组件在未来事件切片与并发模式中，由于生命周期带来的复杂度，并不易于优化。

函数组件本身轻量简单，且在 Hooks 的基础上提供了比原先更细粒度的逻辑组织与复用，更能使用 React 的未来发展。

随着 React 的发展，许多具有状态的传统 class 组件已被弃用，render props 和高阶组件模式被 hooks 所取代。

但建议平时两类组件都用，以根据需求会向下兼容。

const function = ()=>{}和function(){}

使用箭头函数定义的函数被强制使用父级函数的作用域，与闭包有关

function(){}适合export 工具函数Util

const fun 适合组件内部的函数

class MyComponent extends React.Component {
  handleClick = () => {
    console.log(this); // this指向MyComponent组件本身
  }

  render() {
    return (
      <button onClick={this.handleClick}>按钮</button>
    );
  }
}

class MyComponent extends React.Component {
  handleClick() {
    console.log(this); // this指向window对象或undefined（视情况而定）
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>按钮</button>
    );
  }
}

React函数与类组件

函数组件

React.FC组件函数化（传参）

类组件

const function = ()=>{}和function(){}

猜你喜欢