转载自知乎的优秀回答 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树应该如何设计？ - 胡子大哈的回答 - 知乎 可以一起探讨。
