【 React 】函数组件之组合、自定义Hook

函数组件

不支持像类组件那样的继承,但可通过其他方式来实现类似功能,如组合、自定义Hook等。

1、什么是组合

组合是指在React中通过将多个组件结合在一起来创建复杂的 UI 结构。

以下是一个简单的组合案例:

javaScript 复制代码
// 头部组件
function Header() {
  return <header>This is the header</header>;
}

// 内容组件
function Content() {
  return <div>This is the content</div>;
}

// 布局组件,通过组合 Header 和 Content 组件来创建一个完整的布局
function Layout() {
  return (
    <div>
      <Header />
      <Content />
    </div>
  );
}

// 使用布局组件
function App() {
  return (
    <div>
      <h1>App Component</h1>
      <Layout />
    </div>
  );
}

export default App;

展示通过组合创建一个包含头部和内容的简单布局组件。(从案例可知日常开发中基于页面写的组件也就是组合)

2、什么是自定义Hook

一种用于复用 React 组件逻辑的方式

1、自定义Hook规则:

  • 命名规则:自定义hook必须以"use"开头,当然是为了区分普通函数和自定义hook啦

  • 只在函数组件或其他自定义 Hook 中使用:不能在普通的 JavaScript 函数中使用

  • Hooks 的顺序和调用规则: 只能在顶层调用 Hook,不能在条件语句、循环或嵌套函数中调用

是不是对只能在顶层调用 Hook,不能在条件语句、循环或嵌套函数中调用这句话没啥感觉?

上案例:

javaScript 复制代码
import React, { useState } from 'react';

function Counter() {
  let count;
  if (someCondition) {
    // 违反规则:在条件语句中调用 useState Hook
    [count, setCount] = useState(0);
  } else {
    [count, setCount] = useState(10);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
    </div>
  );
}

2、自定义一个Hook:

最简单的案例,一看就会😌

javaScript 复制代码
import { useState } from 'react';

// 自定义 Hook,用于增加计数
function useIncrement(initialValue) {
  const [count, setCount] = useState(initialValue);

  // 增加计数
  function increment() {
    setCount(count + 1);
  }

  // 返回状态和操作函数
  return { count, increment };
}

// 使用自定义 Hook 的组件
function CounterComponent() {
  // 使用自定义 Hook 获取增加计数的方法
  const { count、increment }= useIncrement(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default CounterComponent;
相关推荐
JefferyXZF12 分钟前
Next.js Server Actions 详解: 无缝衔接前后端的革命性技术(八)
前端·全栈·next.js
芜青2 小时前
HTML+CSS:浮动详解
前端·css·html
SchuylerEX2 小时前
第六章 JavaScript 互操(2).NET调用JS
前端·c#·.net·blazor·ui框架
东风西巷3 小时前
Rubick:基于Electron的开源桌面效率工具箱
前端·javascript·electron·软件需求
探码科技3 小时前
AI知识管理软件推荐:九大解决方案与企业应用
前端·ruby
编程小黑马3 小时前
解决flutter 在控制器如controller 无法直接访问私有类方法的问题
前端
unfetteredman3 小时前
Error: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.32' not found
前端·javascript·vite
云存储小精灵3 小时前
Dify x 腾讯云 COS MCP:自然语言解锁智能数据处理,零代码构建 AI 新世界
前端·开源
山间板栗4 小时前
微信小程序环境变量设置方案
前端
电商API大数据接口开发Cris4 小时前
Java Spring Boot 集成淘宝 SDK:实现稳定可靠的商品信息查询服务
前端·数据挖掘·api