这是关于 JavaScript 框架 Vue.js 五个教程的第四部分。在这一部分，我们会学习使用 Vuex 进行状态管理。这个系列教程并不是一个完整的用户手册，而是通过基础知识让你快速了解 Vuejs 以及它的用途。如果你错过了关于组件及 Vue-cli 的部分，在阅读本篇文章之前应该先读读这几部分。现在我们已经了解了关于组件、传递状态和 props 的基本知识，接下来讨论一下 Vuex，它是状态管理的好工具。之前，我们是从顶层组件向下传递状态，而同胞组件之间并没有分享数据。如果它们需要相互通信，我们要在应用程序中推送状态。这是可以的！但是一旦你的程序变得复杂，这种方法就没有意义了。如果你之前用过 Redux，那 Vuex 中所有的概念及实现对你也不陌生。Vuex 是 Vue 中的 Redux。实际上，Redux 也可以用于 Vue，但是，使用专门为 Vue 设计的工具 Vuex 更加有利。

这是 JavaScript 框架 Vue.js 五篇教程的第三部分。在这一部分，我们将学习 Vue-cli ，还会涉及真实的开发流程。这个系列教程并不是一个完整的用户手册，而是通过基础知识让你快速了解 Vuejs 以及它的用途。

这是关于 JavaScript 框架 Vue.js 五个教程的第二部分。在这一部分，我们将学习组件，Props 以及 Slots。这个系列教程并不是一个完整的用户手册，而是通过基础知识让你快速了解 Vuejs 以及它的用途。

如果要我用一句话描述使用 Vue 的经历，我可能会说“它如此合乎常理”或者“它提供给我需要的工具，而且没有妨碍我的工作”。每当学习 Vue 的时候，我都很高兴，因为很有意义，而且很优雅。以上是我对 Vue 的介绍。在我第一次学习 Vue 的时候，我就想要这样的文章。如果你倾向于无党派的方法，请查阅 Vue 简单易懂的 用户指南。

苹果公司（Apple）的发布会也开完了，新产品也将登陆了。估计很多开发人员看到iPhone X的设备是要崩溃了，特别对于前端开发人员更是如此。iPhone X的屏幕覆盖了整个手机的屏幕，为相机和其他各部件留出了一个空间。结果是屏幕设计出现了一些尴尬的情况。比如将网站限制在一个**“安全区域”**。而在屏幕上的安全区域中，造成网站左边或右边有空白区域。很多像我这样的前端开始在考虑，这个蛋疼的东西怎么处理。而且项目中肯定要考虑这个设备的处理方式。值得庆幸的是，有两个小技巧或许可以帮助我们。

谈点：一篇面向初学者的 HOC 介绍。高阶组件听起来挺唬人的，只看名字恐怕不是那么容易明白究竟是何物，而且通常来讲高阶组件并不是组件，而是接受组件作为参数，并且返回组件的函数。早期利用 ES5 的 mixin 语法来做的事，基本都可以使用高阶组件代替，而且能做的还有更多。

今天再来同大家讨论 React 组件设计的一个有趣话题：分解 React 组件的几种进阶方法。React 组件魔力无穷，同时灵活性超强。我们可以在组件的设计上，玩转出很多花样。但是保证组件的Single responsibility principle: 单一原则非常重要，它可以使得我们的组件更简单、更方便维护，更重要的是使得组件更加具有复用性。但是，如何对一个功能复杂且臃肿的 React 组件进行分解，也许并不是一件简单的事情。本文由浅入深，介绍三个分解 React 组件的方法。

React是Facebook开源的一个JavaScript框架。大型Web应用或单页应用程序（SPA）中进行视图（View）的渲染，React是理想的选择。也就是说，React 主要只专注于 MVC 中的 V，也就是视图层。对于初学者而言，多写React项目能更好的帮助我们学习React。那么有一个运行React的环境，能帮助初学者解决很多没有必要的烦恼。在这篇文章中，简单的介绍如何在Codepen上创建React组件或者项目。

继续拓展前面的例子，现在我们已经有了 Header 组件了。假设我们现在构建一个新的组件叫 Title，它专门负责显示标题。你可以在 Header 里面使用 Title组件。

这一节的内容会比较多，如果是刚刚入门的新同学一时半会儿可能会接受不了，而且基本都属于理论知识。如果你在阅读时发现理解有困难也不需要灰心，可以把本篇教程当作随时可供查阅的文档，等到你在实践中积累了一定的代码量之后再回过头来阅读文章就会感觉非常轻松啦。