Skip to content

Latest commit

 

History

History
248 lines (168 loc) · 6.01 KB

07. 组件化和 React.md

File metadata and controls

248 lines (168 loc) · 6.01 KB
Raw

组件化和 React

组件化

  • 是否做过 React 开发？
  • React 以及组件化的一些核心概念
  • 实现流程

题目

  • 说一下对组件化的理解
  • JSX 本质是什么
  • JSX 和 vdom 的关系
  • 说一下 setState 的过程
  • 阐述自己对 React 和 vue 的认识

* 用 React 实现 todoList

说一下对组件化的理解

  • 组件的封装
  • 组件的复用

组件的封装：

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

组件的复用：

  • props 传递
  • 复用

总结：

  • 组件的封装：封装视图、数据、变化逻辑
  • 组件的复用：props 传递、复用

JSX

JSX 本质是什么

  • JSX 语法
  • JSX 解析成 JS
  • 独立的标准

JSX 语法：

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

JSX 语法：

  • JSX 语法根本无法被浏览器所解析
  • 那么它如何在浏览器运行？

JSX 解析：

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

JSX 独立的标准：

  • JSX 是 React 引入的，但不是 React 独有的
  • React 已经将它作为一个独立标准开放，其他项目也可用
  • React.createElement 是可以自定义修改的
  • 说明：本身功能已经完备；和其他标准监控和扩展性没问题
// babel-plugin-transform-react-jsx

// babel plugin transform-react-jsx demo.js

/* @jsx h */

// 这个注释可以 createElement 函数变为 h 函数

总结：

  • JSX 语法（标签、JS 表达式、判断、循环、事件绑定）
  • JSX 是语法糖，需被解析成 JS 才能运行
  • JSX 是独立的标准，可被其他项目使用

jsx 和 vdom

JSX 和 vdom 的关系：

  • 分析：为何需要 vdom
  • React.createElement 和 h
  • 何时 patch ？
  • 自定义组件的解析

为何需要 vdom

  • vdom 是 React 初次推广开来的，结合 JSX
  • JSX 就是模板，最终要渲染成 html
  • 初次渲染 + 修改 state 后的 re-render
  • 正好符合 vdom 的应用场景

何时 patch？

  • 初次渲染 - ReactDOM.render(<App/>, container)
  • 会触发 patch(container, vnode)
  • re-render - setState
  • 会触发 patch(vnode, newVnode)

自定义组件的解析:

  • ‘div’ - 直接渲染 <div> 即可，vdom 可以做到
  • Input 和 List ，是自定义组件（class），vdom 默认不认识
  • 因此 Input 和 List 定义的时候必须声明 render 函数
  • 根据 props 初始化实例，然后执行实例的 render 函数
  • render 函数返回的还是 vnode对象

总结:

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

setState - 异步

说一下 React setState 的过程:

  • setState 的异步
  • vue 修改属性也是异步
  • setState 的过程

setState 为何需要异步？

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

vue 修改属性也是异步：

  • 效果、原因和 setState 一样(小程序中也一样)
  • 对比
  • 权当复习一下 vue 的渲染流程

setState 的过程：

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

总结：

  • setState 的异步：效果、原因
  • vue 修改属性也是异步：效果、原因
  • setState 的过程：最终走到 patch(preVnode, newVnode)

总结

题目

  • 说一下对组件化的理解
  • JSX 本质是什么
  • JSX 和 vdom 的关系
  • 说一下 setState 的过程
  • 阐述自己对 React 和 vue 的认识

说一下对组件化的理解：

  • 什么是组件：组件的定义和引用
  • 组件的封装：封装视图、数据、变化逻辑
  • 组件的复用：props 传递、复用

JSX 的本质是什么：

  • JSX 语法（标签、JS 表达式、判断、循环、事件绑定）
  • JSX 是语法糖，需被解析成 JS 才能运行
  • JSX 是独立的标准，可被其他项目使用

JSX 和 vdom 的关系：

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

说一下 setState 的过程：

  • setState 的异步：效果、原因
  • vue 修改属性也是异步：效果、原因
  • setState 的过程：最终走到 patch(preVnode, newVnode)

React vs vue

* 阐述自己对 React 和 vue 的认识

  • 两者的本质区别
  • 看模板和组件化的区别
  • 两者共同点

前言：

  • 文无第一武无第二，技术选型没有绝对的对与错
  • 技术选型要考虑的因素非常多
  • 作为面试者，你要有自己的主见
  • 和面试官的观点不一致没关系，只要能说出理由

两者的本质区别：

  • vue - 本质是 MVVM 框架，由 MVC 发展而来
  • React - 本质是前端组件化框架，由后端组件化发展而来
  • 但这并不妨碍他们两者都能实现相同的功能

模板的区别：

  • vue - 使用模板（最初由 angular 提出）
  • React - 使用 JSX
  • 模板语法上，更加倾向于 JSX
  • 模板分离上，更加倾向于 vue

模板的区别：

  • 模板应该和 JS 逻辑分离
  • 回顾 "开放封闭原则"

组件化的区别：

  • React 本身就是组件化，没有组件化就不是 React
  • vue 也支持组件化，不过是在 MVVM 上的扩展
  • 查阅 vue 组件化的文档，洋洋洒洒很多（侧面反映）
  • 对于组件化，更加倾向于 React ，做的彻底而清晰

两者共同点：

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

总结：

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