react组件框架(react 组件库)

react组件框架(react 组件库)在 React 中 创建组件有两种主要方式 函数组件和类组件 每种方式都有自己的语法和用例 尽管随着 React Hooks 的引入 它们之间的差距已经显著缩小 但选择适当的组件类型对于构建高效和可维护的 React 应用程序仍然非常关键 import React from react 使用 function 关键字定义函数组件 function FunctionComp props nbsp return nbsp nbsp div nbsp nbsp nbsp h1Hello props



在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
 );
}


编程小号
上一篇 2025-02-06 12:01
下一篇 2025-02-14 15:57

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/bian-cheng-ri-ji/22451.html