React 组件浅析

组件可以是一个函数（React）

组件分类：

• 纯展示型
• 接入型 container （React）
• 交互型组件，各类加强版的表单组件，通常强调复用
• 功能型组件 （router-view / transition）

模板和JSX的对比：

• JSX的灵活性
• 模板适用纯展示型组件（逻辑简单、样式复杂）
• JSX适用功能型组件（逻辑强、样式较少）

变化侦测 和 渲染机制

渲染中，暴力比对，有一些浪费（JavaScript完全可以忽略这些东西），但是可以接受

全局的
div
指定位置
div

状态管理

路由：

其实就是将url映射到组件树

大型单页应用才会使用

CSS方案：

主流的 CSS 方案

• 跟 JS 完全解耦，靠预处理器和比如 BEM 这样的规范来保持可维护性，偏传统
• CSS Modules，依然是 CSS，但是通过编译来避免 CSS 类名的全局冲突
• 各类 CSS-in-JS 方案，React 社区为代表，比较激进
• Vue 的单文件组件 CSS，或是 Angular 的组件 CSS（写在装饰器里面），一种比较折中的方案

构建工具：

构建工具解决的其实是几方面的问题：

• 任务的自动化
• 开发体验和效率（新的语言功能，语法糖，hot reload 等等）
• 部署相关的需求
• 编译时优化

浏览器执行我们编写的代码，如果不支持的话，就需要进行构建，来支持所有新特性

同时请求很多文件是受限制的，解决方案就是合并文件

webpack进行配置的时候很复杂，配置好之后，几乎什么都不用管了。

服务端数据通信：

跨平台渲染：