React入门小册(三)组件

原创已于 2023-09-21 10:03:43 修改 · 412 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2023-03-15 19:58:09 首次发布

react 专栏收录该内容

9 篇文章

订阅专栏

React中的组件是可复用的代码块，分为函数式组件和类组件。函数式组件简洁，仅从props获取数据，而类组件可存储状态和处理生命周期。通过propTypes可以定义组件的属性类型。组件可以通过props组合成更复杂的视图，如在WelcomeBanner组件中组合了Greeting和p元素。

组件

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

函数式组件 vs 类组件

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

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

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

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

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

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

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired
  };

  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

组件的使用

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

<Greeting name="John" />

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

。

组合组件

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

function WelcomeBanner() {
  return (
    <div>
      <Greeting name="John" />
      <p>Welcome to our website!</p>
    </div>
  );
}

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

组合到了一个 WelcomeBanner 中。