# Thinking in Component Tree

- Link: https://www.ixiqin.com/2024/03/24/thinking-in-component-tree/
- Published: 2024-03-24T20:08:55+08:00
- Author: 白宦成

在开发前端应用的时候，我比较推荐在真正开始写代码之前试着画一画组件树 / 状态树。

在很多时候，可能你的设计师已经帮你做好了组件树，但在某些场景下，你的设计时并不会
帮你拆解组件树，或者是你是直接和产品经理对接，他不会帮你拆解组件树。

这个时候，相比于写代码，我更推荐你先拆解组件树，在完成组件树之后，再开始你的 Coding。

![](https://files.ixiqin.com/2024/03/23062235/d2b5ca33bd970f64a6301fa75ae2eb22-5.
png)

Figma / Sketch 之类的软件提供的分组能力、图层的能力，可以帮助你将组件合理的拆解、
分组、归类。当你完成树的建设之后，可以试试看将不同的模块拆解，每个模块是否可以独立
正常的运转。如果不可以，则说明你的状态拆解的可能是有问题的。

当你完成拆解之后，只需要按照你拆解出来的树组织你的 Component 即可。