前端
一点也不简单

React中级面试题

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

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

render () {
  return (
    <ul>
      {this.state.todoItems.map(({item, key}) => {
        return <li key={key}>{item}</li>
      })}
    </ul>
  )

在开发过程中,我们要保证元素的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 (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

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

function CustomForm ({handleSubmit}) {
  let inputElement
  return (
    <form onSubmit={() => handleSubmit(inputElement.value)}>
      <input
        type='text'
        ref={(input) => inputElement = input} />
      <button type='submit'>Submit</button>
    </form>
  )
}
赞(2) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » React中级面试题

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏