Reactjs 示例函数组件 - Javascript

React是一个广泛使用的开源JavaScript框架，旨在简化Web应用程序的开发过程。React有两种主要的组件类型：类和函数组件，本文将对React函数组件进行介绍。

函数组件是一个简单并且易于使用的组件类型，由于它的简单性，它通常用于构建小型应用程序和组件。它接收一些参数（props）并返回一些JSX。

以下是一个简单的函数组件示例：

import React from 'react'

function HelloWorld(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  )
}

export default HelloWorld

这个函数组件接受一个名字（name）的属性，并将其插入到Hello World的问候语中。这个组件可以在另一个React组件中使用，例如：

import React from 'react'
import HelloWorld from './HelloWorld.js'

function App() {
  return (
    <div>
      <HelloWorld name="Alice" />
      <HelloWorld name="Bob" />
    </div>
  )
}

export default App

在这里，我们在App组件中使用了两个HelloWorld组件，并分别将其name属性设置为Alice和Bob。在运行这个组件时，会生成两个问候语，分别为“Hello, Alice!”和“Hello, Bob!”。

除此之外，函数组件还有一些其他的特性，例如：

• Hooks：一组API，用于访问React状态和生命周期方法
• 默认属性：如果组件没有收到必要的属性，则可以使用默认值
• 副作用：允许在组件渲染过程中执行某些操作

总之，React函数组件是构建React应用程序的一个很好的选择，可以帮助您快速开发小型组件或应用程序。