Reactjs 如何用钩子构造智能和哑组件

我有三个组件来处理添加/删除hashtag。让它成为三个类似的文件

• HashTags.ts-智能组件
• ShowHashTags.ts-哑组件
• AddHashTags.ts-智能？组成部分

HashTags组件从服务器获取数据并处理另外两个事件：添加新hashtag和删除hashtag

AddHashTags组件正在处理添加操作（推送到服务器上），然后启动onUpdate函数，告知其主组件（从服务器）更新数据

ShowHashTags组件显示数据并处理onDelete操作

让我向您展示HashTags组件的代码：

const HashTags: React.FC = () => {
    const [rows, setRows] = useState([]); // rows - is data to display (rows of table)
    const [update, setUpdate] = useState(Symbol()); // check the way I fire Update event

    useEffect(() => {
        loadHashTag().then(hashtags => {
            setRows(hashtags);
        });
    }, [update]); // fires "onInit" and when I force to change "update"

    const deleteTag = (id) => {
        deleteHashTag(id).then(() => {
            setUpdate(Symbol()); // force update
        });
    };

    return (
        <div>
            <AddHashTags onUpdate={() => setUpdate(Symbol())} />
            <ShowHashTags data={rows} onDelete={deleteTag} />
        </div>
    );
};

const HashTags:React.FC=（）=>{
const[rows，setRows]=useState（[]）；//rows-是要显示的数据（表的行）
const[update，setUpdate]=useState（Symbol（））；//检查触发更新事件的方式
useffect（（）=>{
loadHashTag（）。然后（hashtags=>{
setRows（hashtags）；
});
}，[update]）；//激发“onInit”，当我强制更改“update”时
常量deleteTag=（id）=>{
删除hashtag（id）。然后（（）=>{
setUpdate（Symbol（））；//强制更新
});
};
返回(
setUpdate（Symbol（））}/>
);
};

请注意我是如何强制更新操作的。有多好？我只需要将新的随机值设置为“update”字段，以激发hook useffect

所以我的问题是，制造这种东西的最佳机制是什么？我的代码可以工作，但我只是想知道它有多好

另外，我可以从服务器上取两次数据。我可以使用全局存储或从AddHashTags组件中回推更新的数据，但我可以再获取一次数据（甚至确保添加了数据）