React:自定义Hook

最新推荐文章于 2024-08-07 08:45:40 发布

im_pcy

最新推荐文章于 2024-08-07 08:45:40 发布

阅读量295

点赞数 1

文章标签： javascript reactjs

本文链接：https://blog.csdn.net/moreerom/article/details/117196790

版权

本文介绍React自定义Hook的基础应用，探讨如何通过自定义Hook解决组件间逻辑复用的问题。以一个简单的表格组件为例，展示了如何将数据加载和重载逻辑抽离到自定义Hook中，使得在不同组件间可以共享这些逻辑。自定义Hook的命名通常以use开头，并可通过参数传递定制数据获取方法。

摘要由CSDN通过智能技术生成

React:自定义Hook的基础使用。

首先我们来看这么一个例子：

import React, {
    useEffect, useState } from "react";

const getStudentData = () => {
   
//可以是向服务端发送请求
    return {
   
        name: "张三",
        code: sum,
        age: 18,
        sClass: "一年级三班",
        seatCode: "15",
        phone: "1234567890",
    };
}

const Table = (props) => {
   
	const setTableRow = (data) => {
   
        let rows = data.map((value) => {
   
            return (
                <tr key={
   value.code}>
                    <td>{
   value.name}</td>
                    <td>{
   value.code}</td>
                    <td>{
   value.age}</td>
                    <td>{
   value