转载自知乎的优秀回答 https://www.zhihu.com/question/54440732
授人以鱼不如授人以渔. 与其教你怎么学会用 webpack 和 React, 还不如跟你交流一下应该如何应对这些新生的技术和工具, 如何建立良好思维习惯, 再去接触这些工具, 有时候会事半功倍, 甚至这个工具出来的时候你就可以看穿它的本质, 你可以根据自己的情况学或者不学它. 有些心态问题本质上其实是逻辑问题.
结论先放前面: 遇到一个新的工具的时候, 先去研究这个工具解决什么问题, 把它解决的问题透彻以后再去研究工具.
这是你日常编程当中遇到 bug 的时候, 接触新的事物的时候都需要做的第一步, 也是一个合格工程师基本的素养. 很多同学初学的时候会遇到这样的情况, 遇到 bug 的时候首先想的是如何解决这个 bug, 然后匆匆忙忙地改代码, 用一个 bug 去掩盖这个 bug, 而不是首先去想这个问题的根源在哪里. 工具也是, 什么潮流学什么, 概念复杂一点的工具就开始懵逼状. 而很多优秀的工程师, 都无不在问题的根源上想得很透彻.
举个例子, React.JS 解决什么问题. 你看了一下官网的介绍: React.JS 是一个 View 库, 用来构建用户交互界面. 这是一句废话, 而不是一个问题. 然后你不甘心, 去看 React.JS 的发布视频 (https://www.youtube.com/watch?v=XxVg_s8xAms), 你发现了主持人说的: React 避免手动更新视图. 为什么要更新视图, 因为数据改变了. 所以 React.JS 本质上解决的问题是: 如何在应用数据变化的时候自动更新用户界面?
然后你想, 这个问题不是可以通过 MVVM 模式来解决吗, 它和普通的 MVVM 有什么区别吗? 然后你发现它和普通的 MVVM 不一样, 它是通过 Virtual DOM 来解决这个问题的, 为什么 Virtual DOM 可以解决这个问题, 其实本质上它是在数据变化的时候重新渲染了整个视图. 而 MVVM 是通过数据绑定, 本质上是通过事件来解决这个问题的.
于是你总结了: 啊, 其实 React.JS 的 Virtual DOM 解决的问题本质上是和 MVVM 一样, 解决数据和视图自动同步的问题. 但是解决方案不一样, 这两种解决方案有什么优劣, 然后你就可以思考下去. 当你总结完了这点以后你会发现, 其实很多框架都是用不同方式解决同一个问题, 不同方式有优劣.
发现了吗, 你从头到尾都没有学 React.JS , 而都是用逻辑工具在研究根源问题.
所以你可以看到, 要准确地描述你所面临的问题 (工具所解决的问题), 然后不停地的归因到根源, 再从这个根源出发去想你能想到的所有解决方案, 再对比所有解决方案的优劣. 这是一个先不停归因到根源, 然后在从根源出发想解决方案. 是一个先收缩到最根, 然后再发散的过程.
但现实当中肯定没那么简单, 因为一个工具可能解决多个问题 (例如 React.JS 有 JSX), 你需要多线路考虑. 这个需要练习, 不停地练习, 直到它成为你生活中的一部分. 等到再出什么工具的时候, 你已经胸有成竹了, 你已经掌握了思考问题的规律, 这些工具都是浮云.
那么, 你可以尝试做练习了: React.JS 的 JSX 到底解决了什么问题?
UPDATE: 这里有一个 Redux 的例子, 关于 Redux 到底解决了什么问题: redux 的 state 树应该如何设计? - 胡子大哈的回答 - 知乎 可以一起探讨.
来源: http://www.jianshu.com/p/96956951f929