前端面试之组件化
栏目: JavaScript · 发布时间: 6年前
- 视图
- 数据
- 变化逻辑
1.2 组件的复用
props
二、JSX 本质是什么
2.1 JSX 语法
-
html
形式 - 引入
JS
变量和表达式 - 循环
-
style
和className
- 事件
- JSX 语法根本无法被浏览器所解析
- 那么它如何在浏览器运行?
2.2 JSX 解析
-
JSX
其实是语法糖 - 开发环境会将
JSX
编译成JS
代码 -
JSX
的写法大大降低了学习成本和编码工作量 - 同时,
JSX
也会增加debug
成本
2.3 JSX 独立的标准
-
JSX
是React
引入的,但不是React
独有的 -
React
已经将它作为一个独立标准开放,其他项目也可用 -
React.createElement
是可以自定义修改的 - 说明:本身功能已经完备;和其他标准监控和扩展性没问题
三、JSX 和 vdom 的关系
3.1 为何需要 vdom
-
vdom
是React
初次推广开来的,结合JSX
-
JSX
就是模板,最终要渲染成html
- 初次渲染 + 修改
state
后的re-render
- 正好符合
vdom
的应用场景
3.2 React.createElement 和 h
3.3 何时 patch
- 初次渲染 -
ReactDOM.render(<App/>, container)
- 会触发
patch(container, vnode)
-
re-render
-setState
- 会触发
patch(vnode, newVnode)
3.4 自定义组件的解析
-
‘div’
- 直接渲染<div>
即可,vdom
可以做到 -
Input
和List
,是自定义组件(class
),vdom
默认不认识 - 因此
Input
和List
定义的时候必须声明render
函数 - 根据
props
初始化实例,然后执行实例的render
函数 -
render
函数返回的还是vnode
对象
四、说一下 React setState 的过程
4.1 setState 的异步
setState 为何需要异步?
setState setState setState
4.2 vue 修改属性也是异步
- 效果、原因和
setState
一样
4.3 setState 的过程
- 每个组件实例,都有
renderComponent
方法 - 执行
renderComponent
会重新执行实例的render
-
render
函数返回newVnode
,然后拿到preVnode
- 执行
patch(preVnode, newVnode)
五、React vs vue
5.1 两者的本质区别
- vue - 本质是 MVVM 框架,由 MVC 发展而来
- React - 本质是前端组件化框架,由后端组件化发展而来
- 但这并不妨碍他们两者都能实现相同的功能
5.2 看模板和组件化的区别
-
vue
- 使用模板(最初由angular
提出) -
React
- 使用JSX
- 模板语法上,我更加倾向于
JSX
- 模板分离上,我更加倾向于
vue
模板的区别
模板应该和 JS 逻辑分离
组件化区别
-
React
本身就是组件化,没有组件化就不是React
-
vue
也支持组件化,不过是在MVVM
上的扩展 - 对于组件化,我更加倾向于
React
,做的彻底而清晰
5.3 两者共同点
- 都支持组件化
- 都是数据驱动试图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 前端组件化演进之路
- 使用parcel开发组件化的前端项目(不借助前端三大框架)
- 吐槽前端组件化的踩坑之路
- 关于前端组件化、状态管理规范化的思考
- 从 Web Components 到 React 谈前端组件化
- 已配置 4000+ 页面,携程前端组件化探索之“乐高”运营系统
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。