React函数与类组件
目录
函数组件
React.FC组件函数化（传参）
类组件
const function = ()=>{}和function(){}
函数组件
函数式组件是一个只接收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 类组件
- 可以使用状态和生命周期函数
- 适用于组件有复杂的业务逻辑，或涉及 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 {
eChartsRef: RefObject;
formRef:RefObject;
jsonUrl: string[];
jsonMsgs: Map;
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();
});
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, prevState: Readonly, 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 (
);
}
}
class MyComponent extends React.Component {
handleClick() {
console.log(this); // this指向window对象或undefined（视情况而定）
}
render() {
return (
);
}
}