CSS 不熟悉,加上之前并不是 React 工程师(上一家公司使用的是 Jquery),答得比较差,根据记忆记录下了以下面试题,希望以后不要再答错。
React 部分
- react 在更新 state 的时候,为什么会使用 setState() 方法?
- 因为直接修改 state 并不会导致组件的更新。如果想要使组件在状态修改后立刻发生更新,就需要使用 setState() 方法。
- 另一个方面,setState() 方法也提供了一些组件内部优化性能的方式。
- setState() 是异步的,react 内部会在合适的时机对 state 进行修改;
- react 会将多个 setState() 在内部合并成一个 setState();
- setState() 除了接受一个对象或者一个函数外,还支持传入一个回调函数。该回调函数可为空,在组件状态更新完成之后触发。在这里可以获取组件更新后的状态,或者对组件更新完成之后的一些操作;
- setState() 第一个参数支持传入一个函数,这个函数默认传入两个参数,一个是修改前的状态(preState),一个是父组件传来的属性(props),如果希望在 setState 之前做一些什么,可以使用函数式写法。
- 受控组件和非受控组件你了解吗?
- 受控组件指的是组件的状态由 react 控制的组件。比如 input 框中的值,由 state 保存,想要修改组件的值,需要对应的修改 state 中的。
- 非受控组件指的是组件的状态由 DOM 控制而非 react 控制,在这种情况下,想要获取组件的状态必须使用 refs,或者使用 DOM 去获取。
- React 的高阶组件,涉及过吗?
- React 中的高阶组件并不是什么 react 的新特性,只是在 react 编程模式下的一种组件。高阶组件其实就是接受(或者不接受)参数,并返回一个组件的组件。高阶组件有很多用处:
- 对代码进行复用
- 代理属性,对 props 进行控制
- React 中的高阶组件并不是什么 react 的新特性,只是在 react 编程模式下的一种组件。高阶组件其实就是接受(或者不接受)参数,并返回一个组件的组件。高阶组件有很多用处:
- React 中的 diff 算法?
- diff 算法的作用是计算处 virtual DOM 中真正变化的部分,并只针对该部分进行原生 DOM 操作,而非重新渲染整个页面
- https://www.jianshu.com/p/3ba0822018cf
- React 的性能优化
- 尽量不要将 props 设置为一个组件的 state
- 利用 shouldComponentUpdated 或者 useMemo 以及 useCallback 来实现对 react 组件更新的控制。多使用 PureComponent
- 在 render 中尽量减少创建变量,以及在传递参数时,尽量减少传递参数
- react 中的对象的比较是浅比较,由于每次都会创建新的对象,尽量避免直接在render()函数中使用对象或者数组直接量。
- 由于diff算法的限制,为了保证不出现使用空间换取时间的情况,在组件发生变化时,尽量避免修改最外层的包裹元素。
- 由于diff算法的限制,在比如创建多个li的组件中,尽量不要出现将最后一个元素,提前到第一个的情况。
- 在一个组件中渲染多个子组件时,保证key保持不变。
CSS 部分
-
有哪些css盒子模型,模型之间的区别
- 标准盒子模型
- 标准盒子模型在计算元素的大小时,会计算 padding 和 border
- ie盒子模型
- 不计算上边框和内边距
- 利用 box-sizing 来设定两种盒子模型
- 标准盒子模型
-
css 权重:
等级 例子 权重值 行内样式 style 1000 ID #nav 100 属性选择器/class/伪类 :hover 10 元素名/伪元素 ::after 1 -
有哪些垂直居中的方式
- 在知道父元素宽高和子元素宽高的情况下,设置子元素的 margin 值。
- 如果是文本,设置文本的 text-align 为 center,设置 line-height 并使用 vertical-align 为 middle
- 设置父元素 position 为 relative,设置子元素 position 为 absolute,并将子元素的 top 和 left 设置为 50%,利用 transform(-50%, -50%) 向上右调整一般的距离。
- 设置父元素的display为flex,并设置justify-center为center,align-item为center。
-
如何实现响应式的布局
- 媒体查询
- 栅格系统
- 百分比局部
- rem 布局 - 弹性布局
- 视口单位
5.伪类和伪元素的区别?
在CSS2中,并未作为明显的区分,在CSS3中有了区分。
- 伪类:引入伪类概念是为了允许基于文档树之外的信息进行选择,或者使用其他简单选择器无法表达这些信息。前者包含那些匹配指定状态的元素,比如
:visited
,:active
;后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child
,:first-of-type
,:target
。 - 伪元素:伪元素创建文档树的抽象,而不是文档语言指定的抽象。不同于其他选择器,它不以元素为最小选择单元,它选择的是元素指定内容。比如
::before
表示选择元素内容的之前内容,也就是""
;::selection
表示选择元素被选中的内容。
- 弹性盒子
菜鸟教程弹性盒子
JS 基础部分
-
对象的浅拷贝和深拷贝
- 浅拷贝不会创建当前对象中,属性值为引用对象的副本,而是直接将引用对象的地址赋值给创建的属性。
- 深拷贝会完全拷贝当前对象中的属性值为引用对象中的属性。
- 有以下方式:
- JSON 对象
- 利用 for in 循环遍历
- Object.create()
-
call、apply、bind
- call、apply 接受一个调用对象和参数,区别在于 call 接受单个参数,而 apply 接受一个参数数组
- bind 只将 this 指针绑定到当前对象上,而不调用
-
闭包,如何处理闭包的内存泄漏
- 闭包由 js 的函数作用域实现。具体的原理是,作用域外部无法访问作用域内部的变量
- 作用:
- 模拟私有变量
- 暂存数据
- 闭包的内存泄露原因在于,在创建变量时,如果该变量处于作用域之外,而被作用域内部所引用,则作用域外部的变量被迫停留在内存中,导致内存的占用不断上升,最终导致内存泄漏。需要在子作用域中,手动释放调用父作用域的值,将其置为 null。
-
如何为数组去重
- 利用 Set()
- 利用对象属性的唯一性