组件化和React

组件化

组件的封装

• 视图
• 数据
• 变化逻辑（数据驱动视图变化）

组件的复用

• props传递数据
• 复用

JSX的本质

JSX语法

• html形式
• 引入js变量和表达式
• if...else...
• 循环
• style和className
• 事件

JSX解析

• JSX其实是语法糖
• JSX语法根本无法被浏览器所解析，开发环境会将JSX编译成JS代码
• JSX的写法大大降低了学习成本和编码工作量

独立标准

• JSX是React引入的，但不是React独有的
• React已经将他作为一个独立标准开放，其他项目也可以用
• React.createElement是可以自定义修改的
• 本身功能已经完备，和其他标准兼容和扩展性没有问题

JSX和vdom的关系

• 为何需要vdom：JSX需要渲染成html，数据驱动视图
• React.createElement和h，都生成vnode
• 何时patch：ReactDOM.render(...)和setState
• 自定义组件的解析：初始化实例，然后执行render

React setState的过程

setState的异步（为什么需要异步）

• 可能会一次执行多次setState
• 你无法规定、限制用户如何使用setState
• 没有必要每次setState都重新渲染，考虑性能
• 即使是每次重新渲染，用户也看不到中间的效果

vue修改属性也是异步的

• set中执行updateComponent是异步的

setState的过程

• 每个组件实例，都有renderComponent方法
• 执行renderComponent会重新执行实例的render
• render函数返回newVnode，然后拿到preVnode
• 执行patch(preVnode, newVnode)

React / Vue

本质区别

• vue 本质是MVVM框架，由MVC发展而来
• React 本质是前端组件化框架，由后端组件化发展而来
• 两者都能实现相同的功能

模板和组件化的区别

模板

• Vue 使用模板
• React 使用JSX
• 模板语法上，倾向于JSX
• 模板分离上，倾向于Vue

组件化

• React本身就是组件化，没有组件化就不是React
• Vue也支持组件化，不过是在MVVM上的扩展
• 对于组件化，倾向于React

两者的共同点

• 都支持组件化
• 都是数据驱动视图

选择

• 国内使用，首推Vue。文档更易读、易学、社区够大
• 团队水平高，推荐React。组件化和JSX