React to-do-list官方推荐示例详细学习

最新推荐文章于 2022-12-04 17:48:09 发布

Rance_King

最新推荐文章于 2022-12-04 17:48:09 发布

阅读量724

点赞数

分类专栏：前端文章标签： react js

本文链接：https://blog.csdn.net/Rance_King/article/details/105774402

版权

本文详细探讨了使用React构建to-do-list的官方示例，通过分析源码和组件结构，揭示了React应用的常用设计模式。示例采用类组件写法，展示了如何管理状态、条件渲染及组件间的通信。文章强调了在React中，高层次组件负责逻辑和状态管理，而低层次组件专注于呈现。此外，还讨论了数据结构设计、ID生成策略以及最佳实践，为初学者提供了宝贵的指导。

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

用react做to-do-list是上手react的一个基本练习。就像玩游戏一样，游戏有一以贯之的逻辑，越早把握基础逻辑的玩家就越能轻松驾驭游戏。这个官方示例对于我来说学习价值极高，试以现在的眼光深入学习一下。
源码：https://download.csdn.net/download/Rance_King/12365080
示例
文件结构拆分：
这个示例中，TodoApp包含了TodoList和TodoInput组件，TodoList包含TodoItem组件

这个拆分方法其实向我们展示了一种react的惯用结构，就是app是最外层，专门处理大量逻辑和状态管理的一个管理层，然后在App之后向下细分，则分出各种实体的组件。在App这个层面的方法和内容都是抽象的，作者还特意把state中的数据结构摆在设计出来的app正上面，非常容易能够对应地看出作者想要展现出来的逻辑。
todos可以想象需要以array的方式进行设计，以适应增加的todolist，而每一条todolist都会需要id，title，和一个表示完成的flag。而App实际上可以管理更多的逻辑，这样的话，todos就作为状态中的一个主要的key被分出来了，然后再以array的形式去再组织。
这个数据结构和组件的抽象形式越早成型，代码整体也就越早成型，不然写到后面则必须不断调整，直到像这个示例一样能够清晰地控制数据为止。在App中返回的整体架构要极度抽象，不要去写具体的实现方法，而是写清楚“我要做什么”。
这可以类比一种金字塔型的管理的思维&