React，将所有功能放在顶级组件中答案

【问题标题】：React, putting all functions in top level componentReact，将所有功能放在顶级组件中
【发布时间】：2020-06-26 20:15:48
【问题描述】：

我正在使用 React 构建一个网站，该网站将变得非常庞大（就功能而言）。目前，我是唯一一个在前端堆栈工作的人，但稍后会有人加入。

现在，我对 React 还比较陌生，我想到了一种方法，可以在不破坏所有内容的情况下更轻松地更改组件 UI：

假设我的主页上有一个类似于 Instagram 帖子的组件。我的想法是，在包含帖子的顶级组件上，我根本没有样式，但我将管理子组件必须访问的所有功能。请看下面的sn-p

const PostCard = ({ post }) => {

   const [visibleComments, setComment] = useState(false);
   const [comments, pushComments] = useState([]);
   const [loadingMedia, setLoadingMedia] = useState(true);
   const [medias, setMedias] = useState([]);
   const [postState, setPostState] = useState(post);
   const [commentToSend, setCommentToSend] = useState('');

   const { age_of_post_in_seconds, created_by, has_media, uuid, text, likes_total, comments_total, liked_by_me, bookmarked_by_me } = postState;

   useEffect(() => {
       if (has_media) {
           setLoadingMedia(true);
           fetchMedia();
       }
   }, [])

   async function fetchMedia() {
       const medias = await getPostMedia(uuid);
       if (!medias) console.log('there was an error');
       else setMedias(medias);
       setLoadingMedia(false);
   }

   async function handleLikePost(isLiked) {
       const success = await likePost(uuid, isLiked);
       if (success) setPostState({ ...postState, liked_by_me: isLiked, likes_total: isLiked ? postState.likes_total + 1 : postState.likes_total - 1 });
   }

   async function handleBookmarkPost(isBookmarked) {
       const success = await bookmarkPost(uuid, isBookmarked);
       if (success) setPostState({ ...postState, bookmarked_by_me: isBookmarked });

   }

   function handleCommentChange(text) {
       setCommentToSend(text)
   }

   async function handleCommentPost() {
       await commentPost(uuid, commentToSend);

       pushComments([...comments, { text: commentToSend }]);
       setCommentToSend('');
       setPostState({ ...postState, comments_total: postState.comments_total + 1 });
   }

   async function handleShowComments() {
       if (comments_total > 0) {
           if (!visibleComments) {
               const comments = await fetchPostComments(uuid);
               pushComments(comments);
           }
           setComment(!visibleComments);
       }
   }

   return (
       <Body>
           <Card>
               <Header
                   caption={text}
                   name={created_by.handle}
                   time={age_of_post_in_seconds}
                   uniqueName={created_by.display_name}
                   avatar={created_by.profile_photo}
               />
               {has_media && !loadingMedia && <Media medias={medias} />}
               <Footer
                   likesTotal={likes_total}
                   likedByMe={liked_by_me}
                   bookmarkedByMe={bookmarked_by_me}
                   id={uuid}
                   likePost={handleLikePost}
                   bookmarkPost={handleBookmarkPost}
                   showComments={handleShowComments}
                   commentsTotal={comments_total}
               />
               {visibleComments && <Comment comments={comments} />}
               {<AddComment postId={uuid} sendComment={handleCommentPost} handleCommentChange={handleCommentChange} comment={commentToSend} />}
           </Card>
       </Body>
   )
}

我认为这种方法的主要优点是可以对页脚进行操作并完全更改它，而不必关心破坏函数或回调。

你们如何看待这种方法？主要缺点是什么？

谢谢

【问题讨论】：

我认为你必须遵循这个结构，所有的逻辑部分甚至函数都放在容器部分，所有的显示都放在组件中。只是你必须从组件调用函数，所有逻辑部分都在容器中完成。

标签： javascript reactjs architecture

【解决方案1】：

考虑使用您自己的命名空间包和一组可重用的 React 组件。您可以在npm 上发布您的包或托管您自己的私有注册表，例如verdaccio.

注册表中的包是版本化的，因此您可以依靠semver 来管理版本/（非破坏性/破坏性）更改。

安装示例

npm install @namespace/components

示例用法

import { Button } from "@namespace/components";
import React from "react";

const MyAwesomeComponent = () => {
    return <Button>Click me!</Button>;
}

export default MyAwesomeComponent

包中的组件应该通过属性获得所需的一切。

【讨论】：

您好朱利安，感谢您的回答。所以基本上和我现在做的一样，但是把子组件放在包里。听起来不错，但我确实有非常严格的截止日期，我不确定我是否有时间学习如何制作包并发布到 npm。我的方法在开发世界中正确吗？我是开发世界的新手，我不确定。谢谢！
嗨@Jorgio 不用担心 - 如果截止日期很紧，请解释一揽子计划的好处以及您需要额外的时间来为负责人建立良好的基础，从而设定这些截止日期。然后，您可以共同决定如何进行。截至目前，对于版本 1，继续将组件放在一个 repo 中。对于版本 2，将这些内容的提取放在路线图上。不用担心，如果您是新手，您会很快找到自己的方式。发布包并创建它们并不难。去谷歌搜索一下:)