船长2022-10-18 来自北京模拟的 Finder 目录结构，原本想采用按【业务功能】拆分的结构的，但做的过程中发现项目比较简单，采用这种模式反而会复杂，于是采用了按【文件职能】拆分的结构，结构如下： YeahMyKanBan │ │ └── FinderSimulate │ │ ├── components │ │ │ ├── Column.tsx │ │ │ ├── CommonCard.tsx │ │ │ └── SystemOperate.tsx │ │ ├── context │ │ │ └── myContext.ts │ │ ├── index.tsx │ │ └── pages │ │ ├── HeaderMenu.tsx │ │ ├── LeftMenu.tsx │ │ └── MainContent.tsx 后面用了 vercel 进行了部署（codesanbox 部署 umi 项目有问题） 在线预览：🔗 https://react-learn2-orpin.vercel.app/YeahMyKanBan/FinderSimulate 源码地址：https://github.com/TanGuangZhi/ReactLearn/tree/main/src/pages/YeahMyKanBan/FinderSimulate展开作者回复: 你好，船长，我看过了你的demo和源码，非常棒！这是到目前为止专栏留言区里最完整的思考题答案了，感谢你的积极和认真。 确实像你说的，目前这个项目相对简单，还不需要使用更加复杂的文件目录结构。你这样的设计恰到好处，尤其是components和pages目录的分工明确，对后续扩展和维护会有很大帮助。 看到你的代码使用了TailwindCSS，是很棒的样式技术。 另外我对Finder首页代码有个小建议： https://github.com/TanGuangZhi/ReactLearn/blob/main/src/pages/YeahMyKanBan/FinderSimulate/index.tsx#L18-L25 的 getColumnData 函数可以声明在 useUpdateEffect 回调函数的内部，这样做代码逻辑上并没有什么区别，但可以避免每次组件重新渲染时都创建一个新函数出来，算是一个小优化。
共 2 条评论2- 船长2022-10-18 来自北京common 文件夹顾名思义是放公共文件、可复用逻辑的地方，比如网站的 Header，Footer，公共 util 等。 比如本次 Finder 项目的 左上角最大最小化按钮就应属于 common 目录的一部分，应为不止 Finder 用到了，macos 下所有的窗口都有这部分
作者回复: 你好，船长，很棒的答案，“Finder 项目的 左上角最大最小化按钮”确实是个很典型的例子。
1 - 船长2022-10-18 来自美国在写这个 demo 的时候想起之前困惑的一个问题，想请教下宋老师，即在 jsx 中 <childComponent/> 与 childComponent() 这 2 种调用组件的方式有什么区别？ 这是一个 demo，上面的输入框是用<childComponent/>这种方式调用的，在输入时会有个输入框失焦的问题，下面用childComponent() 调用的就没这个问题。 demo 地址：https://codesandbox.io/s/fervent-ishizaka-mwusdq?file=/App.tsx），
作者回复: 你好，船长，你的第一种写法相当于在组件内动态定义了一个组件，而函数组件每次渲染都会执行整个函数，意味着每次都会新定义一个SearchForm组件，然后加入到渲染中。 React在重新渲染时会根据组件类型确定有哪个虚拟DOM（FiberNode）是可以复用的，然而每次渲染都定义新组件会导致React每次都新建虚拟DOM，最终销毁并新建真实DOM，导致失去焦点。 我从你的codesandbox fork了一份，把SearchForm组件定义在主组件外面就好了： https://codesandbox.io/s/affectionate-water-jdrhfz?file=/App.tsx
共 4 条评论1