React组件的两种形式

最新推荐文章于 2025-04-20 16:45:26 发布

weixin_39788999

最新推荐文章于 2025-04-20 16:45:26 发布

阅读量628

点赞数

文章标签： reactjs es6

本文链接：https://blog.youkuaiyun.com/weixin_39788999/article/details/104087170

版权

本文详细介绍了React中的两种组件形式：class组件和function组件。class组件适用于需要状态管理和生命周期的应用场景，而function组件则更适合轻量级的UI展示，通过hooks如useState和useEffect可以进行状态管理和副作用操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react组件有两种形式：
class 和 function
1、class组件
class组件通常拥有状态和生命周期，继承与component，实现render方法
创建Home组件：

import React, { Component } from 'react'

export default class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: 'create-react-app',
        }
    }
    render() {
        const { data } = this.state;
        return (
            <div>
                <h1>我是Home</h1>
                <p>{data}</p>
            </div>
        )
    }
}

2、function组件
(function:适合短小精悍的
管理状态：使用hooks useState,useEffect React 16.8.0提出来的)

import React,{useState,useEffect} from 'react'

export default function Hooks() {
    /*
     管理多个状态就设置多个useState:
     状态过多建议使用class组件
    */
    const [state, setstate] = useState(new Date());
    //useEffect参数是一个函数：
    useEffect(() => {
        const timer = setInterval(()=>{
            setstate(new Date());
        },1000)
    })
    return (
        <div>
            <h1>我是hooks</h1>
            <p>{state.toLocaleTimeString()}</p>
        </div>
    )
}