React入门小册(三)组件
创始人
2025-05-28 16:57:57

组件

React中的组件是可复用的代码块，其由JSX元素构成，并根据相关的逻辑和数据创建动态UI。

函数式组件 vs 类组件

React 中有两种类型的组件：函数式组件和类组件。

函数式组件通常情况下仅从 props 中获取输入并且返回一个 JSX 元素。这些组件主要是通过声明函数的方式定义的。例如：

function Greeting(props) {return 
Hello, {props.name}!
;
}

类组件则是通过 ES6 class 语法来定义的。它们可以存储内部 state、订阅生命周期方法等等。例如：

class Greeting extends React.Component {render() {return 
Hello, {this.props.name}!
;}
}

我们可以使用 propTypes 定义组件接受哪些属性以及每个属性的类型。例如：

import PropTypes from 'prop-types';class Greeting extends React.Component {static propTypes = {name: PropTypes.string.isRequired};render() {return 
Hello, {this.props.name}!
;}
}

组件的使用

要使用定义好的组件，我们需要将它像普通 HTML 元素一样在 JSX 中使用：

!!! 组件的名称必须以大写字母开头!!!

。

组合组件

React 的单向数据流使得让多个小组件组合形成大组件非常容易。例如：

function WelcomeBanner() {return (
Welcome to our website!
);
}

在这里，我们将两个组件 Greeting 和

组合到了一个 WelcomeBanner 中。

上一篇：CLIPCAP：图生文

下一篇：深圳市居住登记和居住证办理规定全文最新或2023（历届）11月1日实施 深圳市居住证怎么办理最新流程 深圳市办理居住证新规定

相关内容

热门资讯

信音电子跌2.02%，成交额1... 12月22日，信音电子盘中下跌2.02%，截至13:10，报23.79元/股，成交1.55亿元，换手...
光莆股份跌2.03%，成交额1... 12月22日，光莆股份盘中下跌2.03%，截至13:11，报14.01元/股，成交1.33亿元，换手...
浩云科技跌2.10%，成交额1... 12月22日，浩云科技盘中下跌2.10%，截至13:11，报7.92元/股，成交1.23亿元，换手率...
新晨科技跌2.03%，成交额1... 12月22日，新晨科技盘中下跌2.03%，截至13:12，报19.75元/股，成交1.94亿元，换手...
信德新材涨2.01%，成交额4... 12月22日，信德新材盘中上涨2.01%，截至13:13，报46.28元/股，成交4010.09万元...