community/tutorials/react-components

React 组件是构建用户界面的重要组成部分。以下是一些关于 React 组件的基础知识和实践技巧。

React 组件基础

1. 函数式组件 函数式组件是 React 中最简单的组件类型，它们由一个简单的 JavaScript 函数组成。

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

2. 类组件 类组件是另一种组件类型，它们使用 ES6 类语法来定义。

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

实践技巧

• 状态管理 状态是组件的核心，它决定了组件的显示内容。React 提供了 useState 钩子来管理状态。

  import React, { useState } from 'react';
  
  function Counter() {
    const [count, setCount] = useState(0);
  
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );
  }
  

• 生命周期方法 生命周期方法是在组件的不同阶段调用的函数，如 componentDidMount 和 componentWillUnmount。

扩展阅读

想要了解更多关于 React 组件的信息？请访问我们的 React 教程。

React Logo