React中级面试题

React 中 keys (key)的作用是什么？

Key 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识

render () { return (

{this.state.todoItems.map(({item, key}) => { return

{item}

})}

{this.state.todoItems.map(({item, key}) => { return

{item}

在开发过程中,我们要保证元素的key在同级元素中具有唯一性

key解决了什么问题:

同类型元素不带key只会产生性能问题，如果渲染的是不同类型的状态性组件，组件将会被替换，状态丢失。

调用 setState 之后发生了什么？

在代码中调用setState函数后,React会将传入的参数对象与组件的当前状态合并,然后触发调和过程。经过调和过程,React会以高效的方式根据新的状态构建React元素树,并且准备重新渲染(render)视图。在React得到新的元素树后,会自动计算出新旧元素树的差异,然后根据差异以最小化的方式重新渲染,在差异算法(diff,

React Fiber )中,React精确地知道了哪里发生了改变以及应该如何改变,这样就保证了按需更新,而不是全部重新渲染一遍。

react 生命周期函数

注意:UNSAFE代表是即将被弃用的

初始化阶段

表示从组建开始创建到装载完成这个阶段

1. constructor

2. static getDerivedStateFromProps()

3. componentWillMount() / UNSAFE_componentWillMount()

4. render()

5. componentDidMount()

运行中阶段(更新阶段)

表示当属性或状态发生更新时的阶段

1. componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()

2. static getDerivedStateFromProps()

3. shouldComponentUpdate()

4. componentWillUpdate() / UNSAFE_componentWillUpdate()

5. render()

6. getSnapshotBeforeUpdate()

7. componentDidUpdate()

销毁阶段

表示组件被卸载或者删除的阶段

1. componentWillUnmount()

错误处理阶段

表示当render()内部发生错误时的阶段

1. componentDidCatch()

shouldComponentUpdate 是做什么的，（react 性能优化是哪个周期函数？）

shouldComponentUpdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom。因为 dom 的描绘非常消耗性能，如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法，可以极大的提高性能。 如果在shouldComponentUpdate中返回true(默认true)就会重新渲染,返回false就算状态更新了也不会重新渲染。

为什么虚拟 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 的性能。

React 中 refs 的作用是什么？

Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回

class CustomForm extends Component { handleSubmit = () => { console.log("Input Value: ", this.input.value) } render () { return (

上述代码中的 input 域包含了一个 ref 属性，该属性声明的回调函数会接收 input 对应的 DOM 元素，我们将其绑定到 this 指针以便在其他的类函数中使用。另外值得一提的是，refs 并不是类组件的专属，函数式组件同样能够利用闭包暂存其值：

function CustomForm ({handleSubmit}) { let inputElement return (

React 渲染

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。