学习React(5) - 组件 Component

最新推荐文章于 2024-09-08 09:29:29 发布

原创最新推荐文章于 2024-09-08 09:29:29 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

React学习专栏收录该内容

26 篇文章

订阅专栏

本文深入讲解React中的两种主要组件类型：无状态功能组件(Stateless Functional Component)和有状态组件类(Stateful Class Component)，并提供了具体的代码示例，帮助读者理解如何在实际项目中使用这两种组件。

组件是用来描述一部分的用户界面。
组件是可以重复利用的，而且还可以嵌套在其他组件中。

组件类型：
（1）无状态功能组件 Stateless Functional Component

采用JavaScript Functions

function Welcome(props) {
   return <h1>Hello, {props.name}</h1>;
}

那么在App.js 文件中，应该如何写呢：

import React from 'react';
import './App.css';

class App(){
     return (
         <div className="App">
            <h1>Hello World</h1>
         </div>
     );
}

export default App;

（2）有状态组件类 Stateful Class Component

采用Class extending Component class, render method returning HTML

class Welcome extends React.Component {
   render() {
      return <h1>Hello, {this.props.name}</h1>;
   } 
}

那么在App.js 文件中，应该如何写呢：

import React, { Component } from 'react';
import './App.css';

class App extends Component {
   render() {
     return (
           <div className="App">
             <h1>Hello World</h1>
            </div>
          );
   }
}

export default App;