App.jsx 中的三个疑问

Question

老师好！
请问 在8-2 通用顶部导航栏 视频中，
1、为何要把 属性 title = ’火车票‘ 写在 App.jsx 中 的 Header 标签里
我的意思是，为什么不把 该title属性 直接写在 Header.jsx 文件的 DOM里呐？
哪些属性 该写在哪个文件里，有什么规律可循吗？

2、onBack 函数 为什么要写在 App.jsx 中，而不是直接写在 Header.jsx 里？
是因为 所有的自定义函数 都要统一写在 App.jsx 中，以方便 传递给其它 子组件。我这样的理解对吗？

3、为什么后面视频中的 很多自定义函数 却要写在 actions.js 中，是因为 只有 hook组件的 自定义函数 比如 onBack 才直接写在 App.jsx 中吗？

敬请老师解惑！谢谢。。

Answer 1

茵风泳月 2020-01-13 21:36:24

同学你好，欢迎提问。

对于第一个问题，如果把title直接硬编码在了Header.jsx中，那么这个组件就只能用于特定场景了，一旦有其它页面具备同样样式和功能的模块，只不过文案不同，那也不能复用了。但是如果我们把这个文案提升为传入变量，那么这个组件就可以应用到很多场景中了，提高了复用性能，这是软件设计优劣的一个很重要指标。

第二个问题，你理解的差不多，其实和第一个问题一样，提升可复用度。换句话说，视图组件尽量只负责视觉展现，业务逻辑尽可能提炼到顶部的业务容器组件中。

第三个问题，在actions中的函数都是reducer相关的业务逻辑，都是用来修改store中数据的函数，不像onBack，只操作浏览器BOM。其实你也可以把onBack抽象成action，没问题的，只不过它并不会修改任何store数据。

祝您学习愉快！

• 提问者 慕瓜0165276 #1

  谢谢老师的解答！