起因是最近重构了一个 props 传递层级非常深，组件之间状态通信非常频繁的详情页面。整个代码梳理下来，很难维护，重构时考虑，做组件细分，把数据单拎出来，对数据做一个松散管理。

我们开发惯指的重构，一般都是指技术重构。简单点说就是基于项目进行代码层面的重构。推倒了重新来，老房子扒掉重新造，肯定是有钱了想让自己更舒适，程序代码推倒了重新写，还不是因为代码质量经过长年累月需求迭代，祖传代码越来越难维护，更别说在这个基础上去老树开花，开发一些新功能。（代码太烂，遗留的坑太多，...

前端其实是个很大的范畴。我这里只针对 web 开发的前端而言（下文统称前端）。简单点说，针对浏览器的开发，浏览器呈现出来的页面就是前端。它的实质是前端代码在浏览器端被编译、运行、渲染。前端代码主要由三个部分构成：HTML（超文本标记语言）、CSS（级联样式表）、JavaScript。如图：

碰撞，顾名思义，就是两个物体碰撞在了一起，眼睛是可以直观的观察到碰撞的发生。但对于前端实现，如何让 JavaScript 代码理解两个独立的“物体”（DOM）碰撞在一起呢。这就涉及到碰撞检测（或者叫边界检测）的问题了。