React 功能组件版备忘单

在 React 开发中，功能组件是常用的构建模块。了解并熟练掌握其关键特性，能够极大提升开发效率。以下为您整理一份 React 功能组件版备忘单。

首先是基本定义。功能组件是 React 中定义组件的一种简洁方式，它本质上就是 JavaScript 函数。例如：

import React from 'react';
const MyComponent = () => {
  return <div>这是一个功能组件</div>;
};
export default MyComponent;

这种简洁的语法让代码结构更加清晰。

接着是 props 的使用。功能组件通过 props 接收来自父组件的数据。在父组件中定义数据并传递：

import React from 'react';
import MyComponent from './MyComponent';
const ParentComponent = () => {
  const message = '来自父组件的消息';
  return <MyComponent text={message} />;
};
export default ParentComponent;

在子组件（功能组件）中接收并使用：

import React from'react';
const MyComponent = (props) => {
  return <div>{props.text}</div>;
};
export default MyComponent;

状态管理在功能组件中借助 useState 钩子实现。比如要在功能组件中添加一个计数器：

import React, { useState } from'react';
const CounterComponent = () => {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={increment}>增加</button>
    </div>
  );
};
export default CounterComponent;

useState 接收初始状态值，返回当前状态和更新状态的函数。

还有 useEffect 钩子，用于处理副作用操作，如数据获取、订阅等。下面是一个简单的在组件挂载时执行副作用的例子：

import React, { useEffect } from'react';
const EffectComponent = () => {
  useEffect(() => {
    console.log('组件挂载了');
    return () => {
      console.log('组件即将卸载');
    };
  }, []);
  return <div>这是带有副作用的组件</div>;
};
export default EffectComponent;

第二个参数传入空数组，意味着该副作用只会在组件挂载时执行一次。

掌握这些 React 功能组件的核心要点，无论是小型项目还是大型应用开发，都能更高效地构建用户界面，提升应用的质量和性能。不断实践，将这些知识内化为开发能力，能在 React 开发之路上越走越顺。