博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
react面试题(一)
阅读量:5256 次
发布时间:2019-06-14

本文共 2501 字,大约阅读时间需要 8 分钟。

  • react 生命周期函数

初始化阶段:getDefaultProps:获取实例的默认属性getInitialState:获取每个实例的初始化状态componentWillMount:组件即将被装载、渲染到页面上(在整个生命周期中只会触发一次)render:组件在这里生成虚拟的 DOM 节点componentDidMount:组件真正在被装载之后(在整个生命周期中只会触发一次)
运行中状态:componentWillReceiveProps:组件将要接收到属性的时候调用shouldComponentUpdate:组件接受到新属性或者新状态的时候(可以返回 false,接收数据后不更新,阻止 render 调用,后面的函数不会被继续执行了)componentWillUpdate:组件即将更新不能修改属性和状态render:组件重新描绘componentDidUpdate:组件已经更新 销毁阶段:componentWillUnmount:组件即将销毁

  • 为什么虚拟 dom 会提高性能?

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存,利用 dom diff 算法避免了没有必要的 dom 操作,从而提高性能。用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中当状态变更的时候,重新构造一棵新的对象树。 然后用新的树和旧的树进行比较,记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上,视图就更新了。
  • react diff 原理

把树形结构按照层级分解,只比较同级元素。 给列表结构的每个单元添加唯一的 key 属性,方便比较。 React 只会匹配相同 class 的 component(这里面的 class 指的是组件的名字)。 合并操作,调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制. 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。
  •  (组件的)状态(state)和属性(props)之间的区别

  Props是一个属性值,里面数据是不能改变的;

  State是一个状态机,根据数据的改变更改视图。

  • refs 是什么?

Refs是能访问DOM元素或组件实例的一个函数;
  • React 的工作原理

React 会创建一个虚拟 DOM(virtual DOM)。当一个组件中的状态改变时,React 首先会通过 "diffing" 算法来标记虚拟 DOM 中的改变; 第二步是调节(reconciliation),会用 diff 的结果来更新 DOM。
  • 什么是redux?

redux 是一个应用数据流框架,主要是解决了组件间状态共享的问题,原理是集中式管理,主要有三个核心方法,action,store,reducer, 工作流程是 view 调用 store 的 dispatch 接收 action 传入 store,reducer 进行 state 操作,view 通过 store 提供的 getState 获取最新的数据。 新增 state,对状态的管理更加明确,通过 redux,流程更加规范了,减少手动编码量,提高了编码效率, 同时缺点时当数据更新时有时候组件不需要,但是也要重新绘制,有些影响效率。 一般情况下,我们在构建多交互,多数据流的复杂项目应用时才会使用它们。

  •  react-redux的实现原理

react-redux是一个轻量级的封装库,它主要通过两个核心方法实现:Provider:从最外部封装了整个应用,并向connect模块传递store。Connect:     1、包装原组件,将state和action通过props的方式传入到原组件内部。    2、监听store tree变化,使其包装的原组件可以响应state变化
  • redux-thunk

背景:Redux 的基本做法,是用户发出 Action,Reducer 函数立刻算出新的 State,View 重新渲染,但这是做同步。而如果有异步请求时,那就不能知道什么时候获取的数据有存进store里面,因此此时需要在请求成功时返回一个标识或状态,并在此时再触发action给reducer传值。因此,为了解决异步的问题,就引入了中间件的概念。 redux-thunk 帮助你统一了异步和同步 action 的调用方式,把异步过程放在 action 中解决。
  • 对webpack的理解

webpack是一个预编译模块方案,它会分析你的项目结构将其打包成适合浏览器加载的模块。打包原理:把所有依赖打包成一个bundle.js文件,通过代码分割成单元片段并按需加载。
  • 调用 setState 之后发生了什么

在代码中调用setState函数之后,React 会将传入的参数对象与组件当前的状态合并,然后触发所谓的调和过程(Reconciliation)。 经过调和过程,React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个UI界面。 在 React 得到元素树之后,React 会自动计算出新的树与老树的节点差异,然后根据差异对界面进行最小化重渲染。 在差异计算算法中,React 能够相对精确地知道哪些位置发生了改变以及应该如何改变,这就保证了按需更新,而不是全部重新渲染。
  • React 中 keys 的作用

Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。在开发过程中,我们需要保证某个元素的 key 在其同级元素中具有唯一性。 渲染同类型元素不带key只会产生性能问题,如果渲染的是不同类型的状态性组件,组件将会被替换,状态丢失

 

转载于:https://www.cnblogs.com/strong-FE/p/10901011.html

你可能感兴趣的文章
php学习笔记
查看>>
普通求素数和线性筛素数
查看>>
PHP截取中英文混合字符
查看>>
【洛谷P1816 忠诚】线段树
查看>>
电子眼抓拍大解密
查看>>
poj 1331 Multiply
查看>>
tomcat7的数据库连接池tomcatjdbc的25个优势
查看>>
Html 小插件5 百度搜索代码2
查看>>
P1107 最大整数
查看>>
多进程与多线程的区别
查看>>
Ubuntu(虚拟机)下安装Qt5.5.1
查看>>
java.io.IOException: read failed, socket might closed or timeout, read ret: -1
查看>>
java 常用命令
查看>>
CodeForces Round #545 Div.2
查看>>
卷积中的参数
查看>>
51nod1076 (边双连通)
查看>>
Item 9: Avoid Conversion Operators in Your APIs(Effective C#)
查看>>
深入浅出JavaScript(2)—ECMAScript
查看>>
STEP2——《数据分析:企业的贤内助》重点摘要笔记(六)——数据描述
查看>>
ViewPager的onPageChangeListener里面的一些方法参数:
查看>>