Reactjs 我们应该在多个位置渲染react组件吗？

所以，我有一个叫做平衡组件的组件，我想在导航栏和页面（摘要页面）组件中显示它

但我想防止它发出两次api请求

平衡片代码：

import {createSlice, createAsyncThunk} from '@reduxjs/toolkit';

export const updateBalance = createAsyncThunk(
  'balance/fetchBalance',
  async () => {
    const response = await fetchBalance();
    return response.data;
  }
);

const initialState = {
    value: 0
};

export const balanceSlice = createSlice({
    name: 'balance',
    initialState,
    reducers: {
    },
    extraReducers: () => {...}
});

export const selectBalance = (state) => state.balance.value;

export default balanceSlice.reducer;

这是平衡码

import {useState, useEffect} from 'react';
import {useSelector, useDispatch} from 'react-redux';

import {updateBalance, selectBalance} from './balanceSlice';


function Balance() {
    const balance = useSelector(selectBalance);
    const dispatch = useDispatch();


    useEffect(() => {
        dispatch(updateBalance());
      console.log('component ran')
    }, [dispatch]);

    return (
        <>
          {balance}  
        </>
    );
}

export default Balance;

从'react'导入{useState，useffect}；
从“react-redux”导入{useSelector，useDispatch}；
从“/balanceSlice”导入{updateBalance，选择Balance}；
功能平衡（）{
常量平衡=使用选择器（选择平衡）；
const dispatch=usedpatch（）；
useffect（（）=>{
分派（updateBalance（））；
console.log（'组件已运行'）
}，[发送]；
返回(
{平衡}
);
}
出口违约余额；

因为我想在多个地方重用这个组件，所以我没有在这个组件中添加任何样式。样式设置在摘要页面和导航栏中完成。updateBalance正在从api请求新的余额。我正在使用redux工具包，我正在努力遵循单一责任原则，使组件小型化、可重用和可测试

是否建议在多个位置渲染平衡组件？ 导航条码：

import Balance from './../../features/balance/Balance';
    function TopNavbar() {
    return (
    <Navbar>
    <span className={styles.navbar__text__span}><Balance /></span>
    </Navbar>
    );
    }

从“/../features/Balance/Balance”导入余额；
函数TopNavbar（）{
返回(
);
}

---

类似地，我正在summaryPage组件中导入Balance组件并呈现它。这是一种推荐的方法，还是我应该简单地从balanceSlice导入selectBalance并在导航栏中显示它？

您可以在任何需要的地方渲染平衡组件。 平衡组件将如下所示

function Balance() {
    const balance = useSelector(selectBalance);
    const dispatch = useDispatch();

    useEffect(() => {
        if (balance.status === 'ready') {
            dispatch(updateBalance());
        }
        console.log('component ran')
    }, [dispatch]);

    return (
        <>
            {balance.value ?? 0}
        </>
    );
}

功能平衡（）{
常量平衡=使用选择器（选择平衡）；
const dispatch=usedpatch（）；
useffect（（）=>{
如果（balance.status==='ready'）{
分派（updateBalance（））；
}
console.log（'组件已运行'）
}，[发送]；
返回(
{balance.value？？0}
);
}

---

在updateBalance操作中，您应该将平衡状态设置为“获取”，并调用api。api调用完成后，可以将余额状态设置为“已提取”，并将余额值设置为已提取值。这就是我想的。

如果您只想在多个位置重用那些方法，例如updateBalance，那么您可以创建一个自定义挂钩而不是组件。@miraj，我只想在多个位置显示它。目前，我正在导航栏和摘要页面中显示它。接下来，我可能会在移动设备的左侧菜单中再次显示它。我只想发出一次updateBalance请求，您可以在父组件上调用api。bcz

将在每个可能呈现API的地方调用API，但这违反了单一责任原则。正如redux toolkit演示的那样，api的使用应该在BalanceSlice中完成，您可以为此使用上下文或redux。如果您使用redux，您可以存储与当前状态相关的余额，该余额可以有值获取、获取和就绪。检查存储的当前状态，设置状态获取，并仅在状态就绪时进行api调用。