面试 useEffect mobx&redux React的理解（未完待续）

梳梳
202 阅读4分钟

useEffect

  • 为什么在组件内部调用 useEffect？

    在 effect 中直接访问 count state 变量或其他 props （它已经保存在函数作用域中）
    Hook 使用了 JavaScript 的闭包机制

  • useEffect 会在每次渲染后都执行吗？

    默认在第一次渲染之后和每次更新之后都会执行
    React 保证了每次运行 effect 的同时，DOM 都已经更新完毕componentDidMount，componentDidUpdate和componentWillUnmount

  • 传两个参数

    • 参数一：函数（包含命令式、且可能有副作用代码）

      用来做一些副作用比如异步请求，修改外部参数等行为

    • 参数二：数组（dependencies），effect的触发条件

      1. 空数组 == componentDidMount：初始化调用一次之后不再执行
      2. 不传递第二个参数：不监听任何参数变化 == 每次渲染DOM之后，都会执行useEffect中的函数

  • 清除effect：清除订阅或计时器 ID需return一个清除函数

useEffect(
  () => {
    const subscription = props.source.subscribe();
    //return里面就是清除函数
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source],
);

说说对React的理解？有哪些特性？

  • React，用于构建用户界面的 JavaScript 库，提供了 UI 层面的解决方案，遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效，使用虚拟DOM来有效地操作DOM，遵循从高阶组件到低阶组件的单向数据流，帮助我们将界面成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，构成整体页面
  • 特性
    • JSX语法
    • 单向数据绑定
    • 虚拟DOM
    • 声明式编程
    • Component(组件化)
  • 优势
    • 组件式开发，提高代码复用率
    • 单向响应的数据流会比双向绑定的更安全，速度更快
  • 什么是JSX和它的特性？
    • JSX 是一种定义带属性树结构的语法。JavaScript XML的缩写，不是html或xml，基于ECMAScript的一种新特性
      • 自定义组件名首字母大写
      • 嵌套：在render函数中return返回的只能包含一个顶层标签，否则也会报错
      • 求值表达式：JSX基本语法规则，遇到HTML标签（以<开头），就用HTML规则解析；遇到代码块（以{开头），就用JS规则解析
      • 驼峰命名
      • class属性需要写成className
      • JSX允许直接在模板插入JS变量。如果这个变量是一个数组，则会展开这个数组的所有成员
      • 在JSX中插入用户输入是安全的，默认情况下ReactDOM会在渲染前转义JSX中的任意值为字符串形式，预防XSS攻击
  • 类组件和函数组件之间有什么区别？
    • 共同点
      • 所有 React 组件都必须是纯函数
      • 不能修改它自己的 props（因为React是单项数据流，父组件改变了属性，那么子组件视图会更新）
    • 类组件：
      • 属性 props是外界传递过来的，状态 state是组件本身的，状态可以在组件中任意修改组件的属性和状态改变都会更新视图
    • 函数组件：
      • 接收一个单一的 props 对象并返回了一个React元素
      • 性能更高（类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可）

面向对象的设计能力

HTML5 CSS3 Sass 预处理 ES6 语法 HTTP 协议等网络知识 多浏览器兼容 多分辨率适配 网页性能优化

Echarts SVG CSS3 动画 封装公共组件

前端工程化 模块化(Webpack,SVN,Git 等)管理工具 React-Native 多端移动应用 Mockjs ； jest 单元测试

VueRouter VueX Axios Flex 布局 ES6 Web 语义化 用户鉴权 模块动态加载 ElementUI+RouterLink 作为项目模块切换方式 axios 进行二次简单封装 公共 CSS 样式

采用 Flex 对模块进行弹性布局，使之能使用不同分辨率情况

利用 Axios 发送选中资源和状态，利用返回数据进行部分 Form 表单自动填充，完成所有校验后完成提交 事件代理 音视频渲染 节流 策略模式

采用事件委托的方式获取渲染加入群聊列表

采用原生 Audio、Video 标签实现对聊天音频 视频的播放并用策略模式+动态组件的方式对不同类型消息进行封装

采用 BOM 原生属性+API 实现滚动条上下拉加载更多的功能，同时采用预加载和节流函数实现流畅的无限滚动效果

Web 语义化 Scss 预处理

实时仪表盘：利用 SVG+Ajax 轮询完成对仪表盘的绘制和对数据变化情况的获取实现某类数据的动态展示

中心背景动画：利用 CSS3 动画属性实现资源的路径动画，文字浮动动画的循环播放各类数据图表

avatar
文章
阅读
粉丝