常见面试题 | 黑豆的博客

# React组件之间如何通讯

父子组件props

自定义事件

Redux和Context

# JSX本质是什么

JSX解析出来后就是一个createElement函数，执行会返回一个vnode

# Context是什么，如何应用

父组件向其下所有子孙组件传递信息，如一些简单的公共信息：主题色、语言等。复杂的公共信息请用redux

# shouldComponentUpdate的用途

性能优化

配合不可变值一起使用，否则会出错

# redux单向数据流

# setState场景题

componentDidMount() {
  this.setState({ count: this.state.count + 1 })
  console.log('1', this.state.count) // 0
  this.setState({ count: this.state.count + 1 })
  console.log('2', this.state.count) // 0

  setTimeout(() => {
    this.setState({ count: this.state.count + 1 })
    console.log('3', this.state.count) // 2
  })

  setTimeout(() => {
    this.setState({ count: this.state.count + 1 })
    console.log('4', this.state.count) // 3
  })
}

上面这道题考察了setState异步、合并和setTimeout中是同步的

# 什么是纯函数

返回一个新值，没有副作用，不会修改其他值，重点是不可变值

# React组件生命周期

单组件生命周期

父子组件生命周期

生命周期中注意SCU

# React发起ajax应该放在哪个生命周期

应该放在componentDidMount这个生命周期上，放在一个DOM已经渲染完的生命周期上

# 列表渲染为什么要用key

diff算法中通过tag和key来判断，是否是相通的DOM节点，用key可以减少渲染次数，提升渲染性能

# 函数组件和class组件的区别

纯函数输入props输出JSX

没有实例没有生命周期没有state

不能扩展其他方法

# 什么是受控组件

表单值的要受state控制，需要自行监听onChange更新state

对比非受控组件回答

# 何时时候异步组件

加载大组件

路由懒加载

# 多个组件有公共逻辑，如何抽离

高阶组件HOC

Render Props

# redux如何进行异步请求

使用异步action，如redux-thunk

同步action会直接返回一个action对象，异步action是在异步中dispatch一个action

# react-router如何配置懒加载

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import React, { Suspense, lazy } from 'react'

const Home = lazy(()=>import('./routes/Home'))

const App = () => {
  <Router>
    <Suspense>
      <Switch>
        <Route exact path="/" component={Home}></Route>
      </Switch>
    </Suspense>
  </Router>
}

# PureComponent有何区别

实现了浅比较的shouldComponentUpdate，目的是性能优化，但要结合不可变值来使用

# React事件和DOM事件的区别

所有事件都挂载到document上，event不是原生的，是SyntheticEvent合成事件对象，以及它还有个dispatchEvent机制

# React性能优化

渲染列表时使用key

自定义事件、DOM事件及时销毁

合理使用异步组件

减少函数bind this的次数

合理使用SCU、PurComponent、memo

合理使用Immutable.js

前端通用性能优化，如图片懒加载

webpack方面的优化

# React和Vue的区别

都支持组件化

都是数据驱动视图

都是使用vdom操作DOM

React使用JSX拥抱JS，Vue使用模板拥抱html

React是函数式编程，Vue是声明式编程

React更多需要自立更生，Vue把想要的都给你

← Hooks梳理