在React中,创建组件有两种主要方式:函数组件和类组件。每种方式都有自己的语法和用例,尽管随着React Hooks的引入,它们之间的差距已经显著缩小。但选择适当的组件类型对于构建高效和可维护的React应用程序仍然非常关键。
import React from 'react';
// 使用function关键字定义函数组件
function FunctionComponent(props) {
return (
div
h1Hello, {props.name}!h1
p这是一个函数组件。p
div
);
}
// 使用箭头函数语法定义函数组件
const FunctionComponent = (props) => {
return (
div
h1Hello, {props.name}!h1
p这是一个函数组件。p
div
);
};
export default FunctionComponent;
import React, { useState } from 'react';
const FunctionComponent = () => {
// 使用useState Hook来管理状态
const [count, setCount] = useState(0);
return (
div
p计数:{count}p
button onClick={() => setCount(count + 1)}增加button
div
);
};
export default FunctionComponent;
import React, { useState, useEffect } from 'react';
const FunctionComponent = () => {
const [count, setCount] = useState(0);
// useEffect Hook来复制componentDidMount和componentDidUpdate
useEffect(() => {
// 此代码块在每次渲染后运行
console.log("组件挂载或更新");
// 清理函数(复制componentWillUnmount)
return () => {
console.log("组件将卸载");
};
});
return (
div
p计数:{count}p
button onClick={() => setCount(count + 1)}增加button
div
);
};
export default FunctionComponent;
import React, { Component } from 'react';
// 定义一个扩展自React.Component或React.PureComponent的类组件
class ClassComponent extends Component {
// 如果需要,定义构造函数
constructor(props) {
super(props);
// 如果需要,初始化状态
this.state = {
count: 0
};
}
// 如果需要,定义生命周期方法
componentDidMount() {
// 组件挂载后运行的代码
}
// 如果需要,定义实例方法
handleClick = () => {
// 更新状态或执行其他逻辑
this.setState({ count: this.state.count + 1 });
}
// 定义render()方法来返回JSX
render() {
return (
div
p计数:{this.state.count}p
button onClick={this.handleClick}增加button
div
);
}
}
export default ClassComponent;
import React, { Component } from 'react';
class ClassComponent extends Component {
constructor(props) {
super(props);
// 初始化状态
this.state = {
count: 0
};
}
// 定义一个方法来更新状态
incrementCount = () => {
// 使用this.setState()来更新状态
this.setState({ count: this.state.count + 1 });
}
render() {
return (
div
p计数:{this.state.count}p
button onClick={this.incrementCount}增加button
div
);
}
}
export default ClassComponent;
import React, { Component } from 'react';
class ClassComponent extends Component {
constructor(props) {
super(props);
this.state = {
data: null
};
}
componentDidMount() {
// 在组件挂载时获取初始数据
this.fetchData();
}
componentDidUpdate(prevProps, prevState) {
// 检查数据是否发生变化
if (prevState.data !== this.state.data) {
// 数据已更改,执行其他操作
console.log('数据已更新:', this.state.data);
}
}
componentWillUnmount() {
// 在组件卸载前执行清理任务
console.log('组件将卸载');
// 例如,移除事件监听器、取消进行中的任务等。
}
fetchData() {
// 模拟从API获取数据
setTimeout(() => {
this.setState({ data: '从API获取的一些数据' });
}, 1000);
}
render() {
return (
div
p数据:{this.state.data}p
div
);
}
}
export default ClassComponent;
import React, { Component } from 'react';
class ClassComponent extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
// 自定义方法处理增加计数
handleIncrement = () => {
this.setState({ count: this.state.count + 1 });
}
// 自定义方法处理减少计数
handleDecrement = () => {
this.setState({ count: this.state.count - 1 });
}
render() {
return (
div
p计数:{this.state.count}p
button onClick={this.handleIncrement}增加button
button onClick={this.handleDecrement}减少button
div
);
}
}
export default ClassComponent;
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
div
p计数:{count}p
button onClick={() => setCount(count + 1)}增加button
div
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/bian-cheng-ri-ji/22451.html