react——类组件 函数组件

本文深入探讨了React中组件的创建与使用,通过具体代码示例展示了类组件与函数组件的定义方式,为初学者提供了清晰的学习路径。

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

import React, { Component } from 'react'

export default class App extends Component {
    constructor(){
        super();
        this.state={
            message:"nihaoa liyinhe"
        }
    }
    render() {
        return (
            <div>
                <h2>APPzujianaaaaaaaaaaaa</h2>
                <span>{this.state.message}</span>
            </div>
        )
    }
}
import React, { Component } from 'react'

export default function App(){
    return (
        <div>i m function component!</div>
        
    )
}

 

### React 组件函数组件的区别及使用场景 #### 一、基本定义 React 提供了两种主要的组件形式:组件函数组件。两者都可以用来创建可重用的 UI 部分,但在实现方式上有显著差异。 - **组件**是一种基于 ES6 的 `class` 关键字来定义的组件[^1]。它继承自 `React.Component` 或 `React.PureComponent` 并通过实例化的方式管理状态和生命周期方法。 - **函数组件**则是一个简单的 JavaScript 函数[^2],接收 props 参数并返回 JSX 结构。随着 Hooks 的引入,函数组件也可以拥有状态管理和副作用处理的能力[^3]。 --- #### 二、功能对比 | 特性 | 组件 | 函数组件 | |-------------------|----------------------------------|--------------------------------| | **状态管理** | 使用 `this.state` 和 `this.setState()` 方法 | 使用 `useState` Hook 来管理状态 | | **生命周期方法** | 支持完整的生命周期钩子(如 `componentDidMount`, `componentWillUnmount` 等) | 使用 `useEffect` Hook 替代生命周期方法 | | **性能优化** | 默认不支持自动比较浅层属性变化;需手动扩展 `PureComponent` | 自动进行浅层比较;可以进一步封装为纯组件 `React.memo`[^4] | --- #### 三、最佳实践建议 对于现代 React 开发而言: - 如果不需要复杂的逻辑或者仅用于展示数据,则优先选用函数组件。因为其语法简洁明了,并且借助于 Hooks 能够轻松完成之前只有才能做到的事情。 - 对于一些遗留代码库或者是特别复杂业务逻辑下可能仍然存在对传统的支持情况,在这种情况下继续沿用原有的模式可能是更稳妥的选择。 另外需要注意的是尽管目前推荐更多地采用功能性编程风格编写应用程序,但这并不意味着未来版本中会彻底废弃掉 Class API —— 官方已经明确表示不会移除 class 组件。 --- #### 四、具体示例 以下是两个相同功能的不同写法的例子: ##### (1)组件版计数器 ```javascript import React, { Component } from 'react'; class Counter extends Component { constructor(props){ super(props); this.state = { count :0 }; } incrementCount=()=>{ this.setState({count:this.state.count +1}); } render(){ return ( <div> Count:{this.state.count} <button onClick={this.incrementCount}>Increment</button> </div> ); } } export default Counter; ``` ##### (2)函数组件版计数器 (利用Hooks) ```javascript import React,{ useState }from'react'; function Counter() { const[count,setCount]=useState(0); return( <> Count:{count} <button onClick={()=>setCount(count+1)}>Increment</button> </> ) }; export default Counter ; ``` 上述两段代码实现了同样的增减计数值的功能演示。 --- #### 五、参考资料说明 以上内容综合整理自多篇权威文章以及官方文档解释[^2],确保信息准确无误的同时尽可能覆盖全面知识点。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值