前端面试之组件化

栏目: JavaScript · 发布时间: 6年前

前端面试之组件化

  • 视图
  • 数据
  • 变化逻辑

前端面试之组件化

1.2 组件的复用

props

前端面试之组件化

前端面试之组件化

二、JSX 本质是什么

2.1 JSX 语法

  • html 形式
  • 引入 JS 变量和表达式
  • 循环
  • styleclassName
  • 事件
  • JSX 语法根本无法被浏览器所解析
  • 那么它如何在浏览器运行?

前端面试之组件化

2.2 JSX 解析

  • JSX 其实是语法糖
  • 开发环境会将 JSX 编译成 JS 代码
  • JSX 的写法大大降低了学习成本和编码工作量
  • 同时, JSX 也会增加 debug 成本

前端面试之组件化

前端面试之组件化

前端面试之组件化

2.3 JSX 独立的标准

  • JSXReact 引入的,但不是 React 独有的
  • React 已经将它作为一个独立标准开放,其他项目也可用
  • React.createElement 是可以自定义修改的
  • 说明:本身功能已经完备;和其他标准监控和扩展性没问题

三、JSX 和 vdom 的关系

3.1 为何需要 vdom

  • vdomReact 初次推广开来的,结合 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 可以做到
  • InputList ,是自定义组件( class ), vdom 默认不认识
  • 因此 InputList 定义的时候必须声明 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 两者共同点

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

一个人的电商

一个人的电商

许晓辉 / 电子工业出版社 / 2015-5-1 / CNY 59.00

首次披露电商的运营与操盘内幕,徐小平、梁宁作序,雷军、陈彤、张向东、刘韧、王峰力荐! 这个时代在经历前所未有的转型甚至颠覆,任何行业都将与互联网无缝融合,成为“互联网+”。有很多写电商的书,大多都用浓墨重彩阐释互联网转型的必要性,而讲到如何落地实操则浅尝即止,令人心潮澎拜之后不知如何下手。于是有了这本既有方法论,更重视实操细节的书。 许晓辉,在知名电商公司凡客诚品做过高管,有海......一起来看看 《一个人的电商》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具