编程是一项非常复杂的工程，尤其要编写干净整洁的代码更为困难。我们需要考虑很多问题—变量命名、函数作用域、异常处理、安全保障、性能监控等等。在编程中，变量命名唯一还是一件比较困难的事情，我倾向于编写松散耦合且高度聚合的组件。如果从面向对象或者函数式编程的角度来说，也会遇到同样的问…

现在，用户对于前端页面的要求已经不能满足于实现功能，更要有颜值，有趣味。除了整体 UI 的美观，在合适的地方添加合适的动画效果往往比静态页面更具有表现力，达到更自然的效果。比如，一个简单的 loading 动画或者页面切换效果不仅能缓解用户的等待情绪，甚至通过使用品牌 logo…

注： 本文为第12届D2前端技术论坛《打造高可靠与高性能的React同构解决方案》分享内容，已经过数据脱敏处理。 随着React的兴起, 结合Node直出的性能优势和React的组件化，React同构已然成为趋势之一。享受技术福利的同时，直面技术挑战，在复杂场景下，挑战10倍以…

React Router 4 引入了一种基于 component 的动态路由。 这篇文章中会讨论思考 React Router 背后的哲学，同时也会通过分析 React Router 文档中的示例代码来介绍一下它的语法。 更多 React Router 的介绍请戳 这里。 不想…

HoC 不属于 React 的 API，它是一种实现模式，本质上是一个函数，接受一个或多个 React 组件作为参数，返回一个全新的 React 组件，而不是改造现有的组件，这样的组件被称为高阶组件。开发过程中，有的功能需要在多个组件类复用时，这时可以创建一个 Hoc。 上述代…

在前面三篇文章中，我们阐述了react组件的构成与生命周期，setState的机制。这次我们来谈谈React的事件处理。 我们通常监听真实DOM。举🌰来说，我们想监听按钮的点击事件，那么我们在按钮DOM上绑定事件和对应的回调函数即可。 遗憾的是若页面复杂且事件处理频率高，那么…

接着上一节内容，这一节抓取QQ音乐移动Web端推荐页面接口和PC端最新专辑接口数据。通过这些接口数据开发推荐页面。首先看一下效果图 用chrome浏览器打开手机调试模式，输入QQ音乐移动端地址：https://m.y.qq.com。打开后点击Network，然后点击XHR，可以…

本文尝试解释Redux是如何运作的。我们将用Redux创建一个小案列。如果你正在找靠谱的Redux文档，可以去看官方文档。 来自官方文档的描述：Redux是一个可预测的JavaScript状态容器。换句话说，Redux就是用来处理和管理应用的状态/数据。 现在我们来一步一步来解…

Higher-Order function（高阶函数）大家很熟悉，在函数式编程中的一个基本概念，它描述了这样一种函数：这种函数接受函数作为输出，或者输出一个函数。比如常用的工具方法reduce，map等都是高阶函数 通俗的语言解释：当我们用一个容器（w）把React组件包裹，高…