组件化
组件的封装
- 视图
- 数据
- 变化逻辑（数据驱动视图变化）
组件的复用
- 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
