React面试题

目录

JSX

Redux和dva

React-Router 

React Hooks

函数组件和类组件对比 

setState

错误捕获

 受控组件与非受控组件

组件通信 

生命周期 

三大核心对象

类组件的this指向

---

JSX

• 定义
  • JSX是React定义的一种类似于xml的js语法，，它允许编写类似于html的代码，然后编译为js代码来执行
• 语法规则
  • js表达式用{}包裹
  • 元素的class属性改写为className
  • 绑定事件onclick改写为onClick
  • 只能有一个跟标签

Redux和dva

• Redux工作原理
  • 定义数据放入state中，组件可以将state中的数据作为props来引入。当需要更新数据时，向存储区发送一个操作，该操作将被传递到一个reduce中，reduce接收后返回一个新状态，触发组件重新渲染
• Redux核心概念
  • action
  • store
  • reducer
• Redux常用API
  • getState -- 获取状态
  • dispatch -- 创建action改变状态
  • subscribe -- 检测状态变化

---

• dva
  • UIComponent -- 绘制页面
  • Model -- 存储和处理数据
  • connect -- 链接页面和数据

React-Router 

• 工作原理
• 组件
  • 路由组件 -- BrowserRouter, HashRouter
  • 路由组件配件
    • Route -- 用于定义路由规则，匹配路由
    • Swtich -- 用于将多个路由组合在一起
  • 导航组件 -- Link(链接路由)，NavLink(当前路由)，Redirect(路由重定向)

React Hooks

• 作用
  • Hooks提供如useState, useEffect等内置钩子，使函数式组件也可以用于自己的状态
  • 可以将重复的逻辑抽离出去，解决逻辑复用困难的问题
• Hooks有哪些

函数组件和类组件对比 

• 类组件有自己的生命周期和状态，函数组件没有，只能通过Props来接收数据
• 类组件使用setState来进行状态更新，函数组件要依赖hooks来进行状态管理
• 类组件需要手动绑定this，函数组件的this是可选的，通常直接使用箭头函数来绑定
• 类组件需要继承，函数组件不需要

setState

• 执行过程
  • 当传递一个对象时，setState会将该对象合并到当前状态对象中并触发组件重新渲染啊
  • 当传递一个函数时，该函数会接受先前的状态作为参数并返回一个新的状态对象，然后setState将返回的状态对象合并到当前状态中
  • setState并不是一调用立马改变state值的，多次调用会合并起来处理
• 同步or异步
  • 在React自己的方法，如点击这样的事件中，他是异步的
  • 在setTimeout这样的事件中，他是同步的 

错误捕获

•  componentDidCatch/static getDerivedStateFromError
• window.onError
• react.Profiler

 受控组件与非受控组件

• 受控：输入框中的值实时存到state中，类似于vue的双向绑定
• 非受控：在需要使用的时候才通过ref，id，class等方式去获取对应的节点和直

组件通信 

• props -- 父子通信
• Ref -- 父子通信
• Context标签 -- 跨级通信
• Redux插件 -- 状态存储通信
• pubsubJS插件 -- 发布订阅通信

生命周期 

• 旧版
  • 挂载阶段
    • ​​​​​​​挂载前 -- componentWillMount
    • 初始化 -- render
    • 挂在后 -- componentDidMount
  • ​​​​​​​更新
    • ​​​​​​​使用setState更新
      • ​​​​​​​shouldComponentUpdate -- componentWillUpdate -- render -- ComponentDidUpdate
    • ​​​​​​​使用forceState强制更新
      • ​​​​​​​componentWillUpdate -- render -- componentDidUpdate
    • 使用props更新
      • 父render -- 子componentWillReceiveProps -- 子shouldComponentUpdate -- 子componentWillUpdate -- 子render -- 子ComponentDidUpdate
  • ​​​​​​​​​​​​​​卸载
    • ​​​​​​​卸载前 -- componentWillUnmount
    • 卸载 -- ReactDOM.unmountComponentAtNode(document.getElementById())
• ​​​​​​​​​​​​​​新版(17+)
  • ​​​​​​​componentWillMount, componentWillUpdate,componentWillReceiveProps前加UNSAFE_，即将弃用
  • 新增
    • getDerivedStateFromProps -- 将props作为状态返回，在render之前调用
      • 必须有返回值，返回一个状态对象或null
    • getSnapShotBeforeUpdate -- 获取更新前的数据
      • 必须有返回值，返回值会传递给componentDidUpdate
• 常用生命周期
  • componentDidMount -- 进行一些初始化操作，如开启定时器，请求接口等
  • componentWillUnmount -- 进行一些收尾操作，如销毁定时器，事件监听等
  • render

三大核心对象

• state
• props
• ​​​​​​​ref

类组件的this指向

• 我们知道普通函数的this是指向该类的实例对象的，在React中，react的实例对象是React帮我们创建的，所以我们没有办法直接拿到，所以在类组件中会存在this的指向问题
• 解决方法
  • 通过bind来改变this指向，在constructor中使用诸如this.handleClick = this.handleClick.bind(this)来修改
  • 直接使用箭头函数，因为箭头函数本身没有this