React项目应该怎么设计

楼主前端小白 请问前端大神们都怎么设计React的项目
最近写自己的网站发现各种组件里的State，prop很难管理 加一些功能就会使得原本复杂的组件逻辑更加混乱 一个组件100-200行（也不知道是好还是不好）
很多类似的组件 在设计之初也没想到能够复用 导致写一半要回来改得更generic
后端MVC写惯了 前端很多东西很不适应 想知道大家是怎么从草图开始设计
“一步到位”可能有点夸张 但有没有什么好的设计方法、理念、工具能在设计之初就把短期需要得组件、state、context定的八九不离十
当然这里说的是在不借助redux，next，flux这些，纯粹从设计角度考虑
提前感谢各位的分享！

补充内容 (2023-11-17 01:55 +08:00):

我问个问题而已 为什么要踩我。。。问的问题你不懂吗

补充内容 (2023-11-17 05:54 +08:00):

说Redux的各位能不能顺便说说和Effector 选哪个 为什么 多谢

匿名用户 发表于 2023-11-16 06:23
你的目的是什么？实践设计模式？还是真的开发线上运行的app？前者先看教程，然后问gpt工业界的best practic ...

这个我倒不敢苟同。我斗胆说市面上大多数用Redux的都是over engineering。React发展到今天本身自带的state management 已经足够用了。

banana-republic 发表于 2023-11-16 04:56:54
这个我倒不敢苟同。我斗胆说市面上大多数用Redux的都是over engineering。React发展到今天本身自带的state management 已经足够用了。

还真不是over engineering。redux最大的优势：不可变状态+全局data store是一个处理多人协作开发的常见资源管理模式，特别是immutability，当合作人数上去后是保证代码健壮的必要条件。比如docker的container，infrastructure很流行的immutable infra，都是追求避免开发者随意更改资源状态，只能replace，不能update。这可以让生产环境更稳定，不会因为人多了出现太多不可控变量。也就是说，如果不是玩儿票的玩具项目，是需要多人参与的项目，或者未来会是多人开发，后面早晚还是要上redux的。

匿名用户 发表于 2023-11-16 13:00
您的组是由UI/UX设计UI还是前端Engineer亲自设计 “经验”这个理由很合理 只是我发帖不就想学点经验嘛 LO ...

同样的ui ux也有不同的实现方法，这个不是很相关。

举个简单化的例子吧。比如我面试的时候，以前考过这样一道题。首先我给你一个api，可以得到一个list，里面有10件item的信息。然后，每一件item里，你会得到一个url来拿取更多的data。

ui上，我需要先显示这个10个item的名字。当点击其中一个时，可以显示/隐藏它的additional data。

那么现在你做的时候，可以考虑的问题有哪些？首先你的10个item的显示和隐藏这个state，存在哪里，是parent组件还是每个item组件自己管？其次，你的data fetching是哪个component管？fetch回来的data放在哪里？

考这道题，你会发现不同级别的candidate的approach是不一样的，有的人能够勉强都写在一个component里做出来就不错。有的人会考虑上面的问题，并且可以说出pros&cons。然后更高级别一点的，还会考虑caching拉优化啦，等等。

实际工作中当然例子要更加复杂，但是从做小的东西开始，你就可以考虑不同选择有什么区别，而不是“做出来能work就行了”。慢慢就会有一些体会了。

读读设计模式？

你的目的是什么？实践设计模式？还是真的开发线上运行的app？前者先看教程，然后问gpt工业界的best practice看框架，然后上手敲代码。后者的话，学redux和react redux。用react不会redux，你去面试只要一提多半就把你拒了。现在大型react web app的状态管理的标准答案就是redux，早晚要学的。

让AI帮你设计，你不会没关系，chatgpt肯定能帮到你。

banana-republic 发表于 2023-11-16 04:56:54
这个我倒不敢苟同。我斗胆说市面上大多数用Redux的都是over engineering。React发展到今天本身自带的state management 已经足够用了。

个人项目肯定是overengineered，公司多人协作还是唯一能让大家开发风格一致代码方便读懂的方案

banana-republic 发表于 2023-11-16 04:56:54
这个我倒不敢苟同。我斗胆说市面上大多数用Redux的都是over engineering。React发展到今天本身自带的state management 已经足够用了。

那只能说你开发的应用还不够复杂。

经验。。。

建议先从需要存储state的稍微小一点的项目开始，比如套两三层组件的，考虑存在不同地方的利弊。

有一些design pattern可以学习，但是也都是有利有弊，其实都看你项目需要。

design pattern和SOP很类似 一定要为之找个优点的话 它们是用来fool proof的 只能保证质量底线

匿名用户 发表于 2023-11-16 09:49
经验。。。

建议先从需要存储state的稍微小一点的项目开始，比如套两三层组件的，考虑存在不同地方的利 ...

您的组是由UI/UX设计UI还是前端Engineer亲自设计 “经验”这个理由很合理 只是我发帖不就想学点经验嘛 LOL
很多设计系统比如Chakra UI这种 小的组件基本都是现成的 就不得不从稍微复杂一点的地方开始 :(