函数式组件

React

• child::子组件

梗概

• 使用[use::JSX]声明组件
• 组件标签必须以大写开头

注意：

Transclude of JSX#^e49jp3

示例

// Functional Component
const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
}
 
// Usage
<Greeting name="Alice" />

优势

• 简洁：只需一个函数即可定义组件，无需类声明
• 易于测试：纯函数输入输出可靠，易于编写单元测试
• 性能优化：无需实例化组件对象，减少内存消耗

生命周期

• child::

  函数组件的生命周期钩子

  • father::函数式组件
  • 函数组件没有类组件那样的生命周期钩子
  • 每次重新渲染的时候都会执行定义组件的函数 ^xj4j5b
    • base::

      Transclude of hook#^of5wmj

  指向原始笔记的链接

• 不适用于所有场景，特别是涉及到复杂的状态管理和生命周期逻辑时