React常用面试题

最新推荐文章于 2024-03-29 01:34:34 发布

hubert39641020

最新推荐文章于 2024-03-29 01:34:34 发布

阅读量489

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/hubert39641020/article/details/126742485

版权

1. 什么是React？

React是用于构建用户界面的JavaScript库 ，起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设自己的网站，React 不是一个 MVC 框架，仅仅是视图（V）层的库

2. 为什么虚拟 dom 会提高性能?

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。

用Js对象表示真实的DOM结构，当状态变化的时候在重新创建一个虚拟DOM树结构，然后用新的树和旧的树进行比较，记录两棵树差异，把所记录的差异应用到所构建的真正的 DOM 树上，视图就更新了。

3. 什么是JSX？

jsx是JavaScript的一种语法扩展，它跟模板语言很接近，但是它充分具备JavaScript的能力

JSX就是用来声明React当中的元素，React使用JSX来描述用户界面

JSX语法糖允许前端开发者使用我们最熟悉的类HTML标签语法来创建虚拟DOM在降低学习成本

4. React创建元素的方法？

React.createElement()

5. class组件和函数组件区别

语法上：

函数式组件是一个纯函数，它是需要接受props参数并且返回一个React元素就可以了。类组件是需要继承React.Component的，而且class组件需要创建render并且返回React元素，语法上来讲更复杂。

状态管理：

函数式组件没有状态管理，类组件有状态管理。

调用方式：

函数式组件可以直接调用，返回一个新的React元素；类组件在调用时是需要创建一个实例的，然后通过调用实例里的render方法来返回一个React元素。

6. React 事件绑定的方式

React 事件绑定属性的命名采用驼峰式写法，采用 JSX 的语法传入一个函数作为事件处理函数

事件绑定函数的方式

直接写函数名字{callback}，
可以使用bind方法绑定调用 {callback.bind(this)}

7. 事件处理方法this指向改变

当我们把事件函数写成普通函数的形式时 , 调用函数使用state变量会报错，提示state变量不存在，

是因为

事件处理程序的函数式函数调用模式，在严格模式下，this指向undefined

render函数是被组件实例调用的，因此render函数中的this指向当前组件

解决方法： 1. 把普通函数改成箭头函数 2. 调用函数的时候使用bind方法改变this指向

8. React事件处理方法传值

调用的时候定义一个箭头函数函数中调用方法传递参数据

<button onClick={()=> this.del(index) }>   点击</button>

第二种方法 bind方法传递参数

<button onClick={this.del.bind(this,index) }>  点击</button>

9 React如何获取表单数据

给文本框绑定value属性，value属性绑定state中定义的变量
给表单绑定onChange事件，调用定义的方法
在方法中我们获取e.target.value属性，赋给value属性绑定的变量

10. React条件渲染方法有哪些

if-else的条件渲染方法
三元运算符进行条件渲染，可以缩短代码量
switch的多条件渲染效果
HOC条件渲染

11. React怎么实现列表渲染

react中可以使用map方法渲染列表，return对应的页面结构即可， React 在渲染列表时，会要求开发者为每一个列表元素指定唯一的 key ，我们尽量不要使用index索引值作为key，如果对数据进行：逆序添加、逆序删除等破坏顺序操作：可能会引起页面更新错误问题。

12. React中key的作用是什么?

key是虚拟DOM对象的唯一标识，在更新显示时key起到极其重要的作用，简单的来说就是为了提高diff的同级比较的效率，避免原地复用带来的副作用

react采用的是自顶而下的更新策略，每次小的改动都会生成一个全新的的vdom，从而进-行diff，如果不写key，就会发生本来应该更新却没有更新

13. React组件样式的定义方式

外联样式

定义css文件，在组件中通过import导入css样式，

import "App.css"
内联样式

React推崇的是内联的方式定义样式。这样做的目的就在于让你的组件更加的容易复用

定义一个style属性，属性中定义对应的css样式即可，比如style={{fontSize:'15px'}}

外层花括号是语法，内层花括号是对象边界符

14. Props校验数据类型

array（数组）、bool（布尔值）、func（函数number（数字）、object（对象）、string（字符串）

15.受控组件和非受控组件

受控组件 由React控制的输入表单元素而改变其值的方式，称为受控组件。比如，给表单元素input绑定一个onChange事件，当input状态发生变化时就会触发onChange事件，从而更新组件的state。 非受控组件 非受控组件指的是，表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值。在非受控组件中，可以使用一个ref来从DOM获得表单值。

16. props和state的区别

props是指组件间传递的一种方式，props自然也可以传递state。由于React的数据流是自上而下的，所以是从父组件向子组件进行传递；另外组件内部的this.props属性是只读的不可修改！

state是组件内部的状态（数据），不能够直接修改，必须要通过setState来改变值的状态，从而达到更新组件内部数据的作用。

17.组件传值的方式？

父传子组件通信，子传父组件通信兄弟组件通信

18.父传子通信流程

在父组件中的子组件标签上绑定自定义属性，挂载传递的数据
子组件中props接受传递的数据，直接使用即可

19. 子传父通信的流程

父组件中子组件标签上绑定一个属性，传递一个方法给子组件
子组件中通过props接受这个方法，直接调用，传递相应的参数即可

20.非父子组件通信

状态提升(中间人模式) React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件,在父组件上改变这个状态然后通过props分发给子组件
context状态树传参

21.context是怎么运行的?

在父组件中我们通过createContext() 创建一个空对象，在父组件的最外层我们使用Provider包裹数据，通过value绑定要传递的对象数据。

在嵌套的子组件中，我们有两种方式获取数据: (1) 我们可以使用Customer标签，在标签中绑定一个箭头函数，函数的形参context就是value传递的数据 (2). class组件中我们可以定义static contextType=context对象，组件中直接使用this.context获取数据。

22.React生命周期分为几个阶段?

Mounting(挂载阶段)：已插入真实 DOM Updating(更新阶段)：正在被重新渲染....... Unmounting(卸载阶段)：已移出真实 DOM

23. 简述React的生命周期函数?

挂载阶段:

constructor() 在 React 组件挂载之前，会调用它的构造函数。

componentWillMount: 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。

componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用

更新运行阶段:

componentWillReceiveProps: 在接受父组件改变后的props需要重新渲染组件时用到的比较多，外部组件传递频繁的时候会导致效率比较低

shouldComponentUpdate():用于控制组件重新渲染的生命周期，state发生变化，组件会进入重新渲染的流程，在这里return false可以阻止组件的更新

render(): render() 方法是 class 组件中唯一必须实现的方法。

componentWillUpdate()**: shouldComponentUpdate返回true以后，组件进入重新渲染完成之前进入这个函数。

componentDidUpdate(): 每次state改变并重新渲染页面后都会进入这个生命周期卸载或销毁阶段 componentWillUnmount ()：在此处完成组件的卸载和数据的销毁。

24. React旧生命周期有哪些问题？

(1) componentWillMount ,在ssr中这个方法将会被多次调用，所以会重复触发多遍，同时在这里如果绑定事件，将无法解绑，导致内存泄漏，变得不够安全高效逐步废弃。 (2) componentWillReceiveProps 外部组件多次频繁更新传入多次不同的 props，会导致不必要的异步请求 (3) componetWillupdate, 更新前记录 DOM 状态, 可能会做一些处理，与componentDidUpdate相隔时间如果过长，会导致状态不太信

25. React新生命周期有哪些改变？

用 getDerivedStateFromProps替换了 compoentWillMount和compontWillReceiveProps生命周期函数
用getSnapshotBeforeUpdate函数替换componetWillUpdate方法，避免和CompoentDidUpdate函数中获取数据不一致的问题

26. react的路由几种模式，是什么？

两种路由模式: 一种是Hash路由模式，用的是HashRouter组件一种是历史路由模式，用的是BrowserRouter组件绑定

27. react路由常用的组件有哪些？

HashRouter或BrowserRouter配置路由模式 Route 定义路由组件映射关系 Redirect 设置路由重定向 NavLink 或者Link 页面路由跳转 Switch 路由匹配，当path匹配到一个component之后，将不会再想下继续匹配，提高了程序效率

28. react路由传参的方式有哪些？

//隐士参数传递 (1) this.props.history.push({ pathname : '/user' ,query : {id:100}}) this.props.location.query.id 获取query传递的参数据，刷新数据不在 (2) this.props.history.push({ pathname:'/user',state:{id: 1000 } }) this.props.location.state.id 获取state的数据,刷新数据还在

url传参方式 (<Link to="/user?id=100"></Link>) history.location.search获取数据比较麻烦，得自己解析
动态路由定义 /detail/:id => /detail/100 => location.match.params中接受的参数是 {id:100}

29. react路由跳转的方式有哪些?

声明式导航: 使用NavLink或者Link跳转， to属性后面跟字符串或者跟对象编程式导航跳转: props.history.push(url) 跳转页面可以返回上一页，保留历史记录 props.history.replace(url) 跳转页面，清空历史记录 props.history.go(num) 返回第几个页面

30. react路由嵌套如何配置？

配置父组件的路由地址，在父组件中配置子组件的路由映射关系
关闭父组件路由配置exact属性，避免精准匹配
父组件路由地址作为子组件路由地址的开始的一部分。比如父组件是/index 子组件应该是/index/子组件地址

31. withRouter是干什么的？

不是所有组件都直接与路由相连（比如拆分的子组件）的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，将react-router的history、location、match三个对象传入props对象上，此时就可以使用this.props.history跳转页面了或者接受参数了

32. 什么是Redux?

在react中每个组件的state是由自身进行管理，包括组件定义自身的state、组件之间的通信通过props传递、使用Context实现数据共享等，如果让每个组件都存储自身相关的状态，理论上来讲不会影响应用的运行，但在开发及后期我们将比较难以维护，所以我们可以把数据进行集中式的管理，redux就是一个实现上述集中管理的容器的工具，redux并不是只应用在react中，还与其他界面库一起使用，如Vue

33. Redux的三大原则

state数据必须是单一数据源
redux中的state数据必须是只读的，只能通过dispatch调用actions修改
Reducer必须使用纯函数来执行修改

34. redux的执行原理

React的组件需要获取或者修改页面的数据，通过dispatch方法调用actions进入到Reducer函数中修改state的数据内容，state更新后，通知组件更新页面即可。

35. redux的使用步骤

创建一个store文件夹，新建一个index.js文件
文件中导入redux的createStore方法，用于创建公共数据区域
创建一个reducer纯函数，接受两个参数state，actions分别表示分别表示数据和操作state的方法，返回state数据给组件页面
把reducer作为createStore的参数抛出
在需要使用的页面导入store文件，通过store.getState获取数据，通过store.dispatch触发action修改state数据
store.subscrible 方法监听 store 的改变，避免数据不更新

36. state和props有什么区别

相同点：两者都是 JavaScript 对象两者都是用于保存信息 props 和 state 都能触发渲染更新区别： props 是外部传递给组件的，而 state 是在组件内被组件自己管理的，一般在 constructor 中初始化 props 在组件内部是不可修改的，但 state 在组件内部可以进行修改 state 是多变的、可以修改

37. super() 7和super(props)有什么区别?

在 React 中，类组件基于 ES6，所以在 constructor 中必须使用 super 在调用 super 过程，无论是否传入 props，React 内部都会将 porps 赋值给组件实例如果只调用了 super()，那么 this.props 在 super() 和构造函数结束之间仍是 undefined

38. 说说 React中的setState执行机制

一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是state, 当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用 setState第一个参数可以是一个对象，或者是一个函数，而第二个参数是一个回调函数，用于可以实时的获取到更新之后的数据在使用setState更新数据的时候，setState的更新类型分成：同步更新，异步更新在组件生命周期或React合成事件中，setState是异步在setTimeout或者原生dom事件中，setState是同步对同一个值进行多次 setState， setState 的批量更新策略会对其进行覆盖，取最后一次的执行结果

39. React的事件机制总结

React事件机制总结如下：

React 上注册的事件最终会绑定在document这个 DOM 上，而不是 React 组件对应的 DOM(减少内存开销就是因为所有的事件都绑定在 document 上，其他节点没有绑定事件)

React 自身实现了一套事件冒泡机制，所以这也就是为什么我们 event.stopPropagation()无效的原因。

React 通过队列的形式，从触发的组件向父组件回溯，然后调用他们 JSX 中定义的 callback

React 有一套自己的合成事件 SyntheticEvent

40. 说说对React refs 的理解？应用场景？

创建ref的形式有三种：

传入字符串，使用时通过 this.refs.传入的字符串的格式获取对应的元素

传入对象，对象是通过 React.createRef() 方式创建出来，使用时获取到创建的对象中存在 current 属性就是对应的元素

传入hook，hook是通过 useRef() 方式创建，使用时通过生成hook对象的 current 属性就是对应的元素

在某些情况下，我们会通过使用refs来更新组件，但这种方式并不推荐，更多情况我们是通过props与state的方式进行去重新渲染子元素

但下面的场景使用refs非常有用：

对Dom元素的焦点控制、内容选择、控制

对Dom元素的内容设置及媒体播放

对Dom元素的操作和对组件实例的操作

集成第三方 DOM 库

41.react Hook介绍

1.什么是hook

react hook是react中引入的新特性，可以让函数组件拥有状态state，ref，生命周期等属性。

2.为什么会出现hook？

由于函数式组件是全局当中一个普通函数，在非严格模式下this指向window，如果react内部开启严格模式，this指向undefined，无法像类组件一样使用state，ref，函数式组件定义的变量都是局部的，无法存储变量。当一个组件特别复杂冗余的话会变得难以复用

3.常用的hook

3.1 useState

使函数式组件也能保存状态的一个hook，返回值是一个数组，数组接收两个参数，第一个为状态的值，第二个修改状态的方法

// 初始化
const [ count,  setCount ] = useState(0)
// 更新
setCount(count+1)

3.2 useEffect

接收两个参数，第一个为函数，表示组件挂载、更新执行的内容，函数内部返回的也是函数，表示组件卸载调用的函数

第二个参数为可选项，可传入数组，数组里可以为空，表示不依赖任何状态的变化，即只在组件即将挂载时执行，后续任何状态发生了变化，都不调用此hook。数组里也可以定义一或多个状态，表示每次该状态变化时，都会执行此hook。

useEffect(()=>{
  // 这样模拟的是 componentDidMount
}, [])
useEffect(()=>{
  // 这样模拟的是componentDidMount 以及当count发生变化时执行componentDidUpdate
}, [count])
useEffect(()=>{
  return ()=>{
  // 这样模拟的是 componentWillUnmount
  }
}, [])

(3) useContext

在没有hook之前，我们通常都会通过 xxxContext.Provider 和 xxxContext.Consumer 的方式来传递和获取context的值，使用hook之后，传递context的方式不变，但子元素获取context的方式变得更加的简洁。

// 以前的定义方式
const CountContext = React.createContext()
 <CountContext.Provider value={{ count: 10 }}>
     <...自定义的组件>
 </CountContext.Provider>
// 子元素
<CountContext.Consumer>
    { value => { console.log(value.count) }} //10
</CountContext.Consumer>
//使用context的获取方式
const countObj = useContext(CountContext)
console.log(countObj.count) // 10

(4) useRef

useRef和类式组件中createRef用法比较类似，返回一个ref对象，这个对象在函数的整个生命周期都不变，根据这个特性，有两种比较常见的用法。

① 用于dom元素或者组件上，通过current属性可以获取到dom元素或者类式组件的实例对象。需要注意的是，无论是useRef还是createRef或者是回调形式、字符串形式的ref，都是不能直接给函数式组件定义的，因为函数式组件的this指向undefined，没有实例对象，只能通过forwardRef定义到函数式组件中的某个dom元素。

// 这样就将传递给函数式组件的ref绑定在了函数式组件内部的input标签上
import React, { useRef, forwardRef } from 'react'
// 使用函数表达式的方式定义了一个函数式组件
const InputCom = forwardRef((props, ref) => {  
  return <input ref={ref}/> 
})
export default function refDemo(){
    const comRef = useRef()
    return(<div>
       <InputCom ref={comRef}/>     
    </div>) 
 }

② 保存一个数据，该数据如果不手动修改，它在整个生命周期中都不变

const [ count, setCount ] = useState(0)
const prevCount = useState(count)
// 当count发生变化时，组件更新，对count的前一次数据进行保存
useEffect(()=>{
  prevCount.current = count
}, [count])

(5) useReducer

useReducer相当于是useState的升级版，作用与useState类似，都是用来保存状态，但它的不同点在于可以定义一个reducer的纯函数，来处理复杂数据。

// 定义一个处理数据的reducer纯函数
function reducer(prevState, action){
  switch(action.type){
    case 'increment':
      return {...prevState, count: prevState.count + 1 }
    case 'decrement':
      return {...prevState, count: prevState.count - 1 }
    default:
      return prevState
  }
}
// 初始化状态
const [ count, dispatch ] = useReducer(reducer, { count: 0 })
// 修改状态，此时的修改需要派发一个action，让传入的reducer函数进行处理
dispatch({ type: 'increment' })

(6) useCallback

函数式组件中，每一次更新状态，自定义的函数都要进行重新的声明和定义，如果函数作为props传递给子组件，会造成子组件不必要的重新渲染，有时候子组件并没有使用到父组件发生变化的状态，此时可以使用useCallback来进行性能优化，它会为函数返回一个记忆的值，如果依赖的状态没有发生变化，那么则不会重新创建该函数，也就不会造成子组件不必要的重新渲染。

import React, { useState, useCallback, memo } from 'react'
const AddBtn = memo((props)=>{ // 使用函数表达式的方式定义了一个函数式组件
    return<button onClick={props.increment}>+1</button>
})
 
export default function CallBackPerformance(){
    const [ count, setCount ] = useState(0)
    const [ show, setShow ] = useState(true)
    const increment1 = () => {
        console.log('increment1被调用了')
        setCount(count+1)
    }
 
   const increment2 = useCallback(()=>{  // 使用了useCallback来优化的函数
         console.log('increment2被调用了')
         setCount(count+1)
    },[count])
 
    return(<div>
            <div>当前计数：{count}</div>
            <AddBtn increment={increment1} name="1"/>
            <AddBtn increment={increment2} name="2"/>
            <button onClick={e => setShow(!show)}>切换show</button>
        </div>)
}
// 当show这个状态发生变化时，子组件increment1会重新渲染，increment2不会重新渲染

(7) usemo

useMemo也是返回一个记忆的值，如果依赖的内容没有发生改变的话，这个值也不会发生变化，useMemo与useCallback的不同点在于useMemo需要在传入的函数里需要return 一个值，这个值可以是对象、函数，格式如下。

useMemo(()=>{
   return { count }
}, [count])
// 使用useCallback时   
const increment2 = useCallback(()=>{
    setCount(count+1)
},[count])
// 使用useMemo模拟useCallback
const increment2 = useCallback(()=>{
    return ()=>{
        setCount(count+1)
    }
},[count])
// useMemo的应用场景，当要进行一些复杂的计算时，
//计算的值没有发生变化，并不需要每一次更新都重新计算
import React, { useState, useMemo } from 'react'
const calculateNum = (count) => {
    console.log('total重新计算了')
    let total = 0
    for(let i = 0; i <= count; i++){
        total += i
    }
    return total
}
export default function ComplexUseMemo(){
    const [ count, setCount ] = useState(10)
    const [ show, setShow ] = useState(true)
    const total = useMemo(()=>{
        return calculateNum(count)
    }, [count])
    return(<div>
        <div>{total}</div>
        <button onClick={e=>setCount(count+1)}>+1</button>
        <button onClick={e=>setShow(!show)}>切换show</button>
    </div>)
}

(8) useImperativeHandle

这个是与forwardRef配合来使用的，当我们对函数式组件使用forwardRef将ref指定了dom元素之后，那就父组件就可以任意的操作指定的dom元素，使用useImperativeHandle就是为了控制这样的一种行为，指定父元素可操作的子元素的方法。

import React, {  useRef, useImperativeHandle, forwardRef } from 'react'
const InputComp = forwardRef((props, ref)=>{
  const childInputRef = useRef()
  useImperativeHandle(ref, ()=>({
    focus: ()=>{
      childInputRef.current.focus()
    }
  }), [childInputRef.current])
 
  return<input ref={childInputRef}></input>
})
export default function ImperativeHookDemo() {
  const inputRef = useRef()
  return(<div>
      <InputComp ref={inputRef}/>
      <button onClick={e=>inputRef.current.focus()}>聚焦</button>
    </div>)
}

(9) useLayoutEffect

这个方法与useEffect类似，只是执行的顺序稍有不同，useEffect是在组件渲染绘制到屏幕上之后，useLayoutEffect是render和绘制到屏幕之间。

4、如何自定义hook？

hook只能定义在函数式组件中，不能在普通函数中使用，如果我们想要使用到上面的hook来封装一些方法供很多个组件调用，这时候就需要自定义hook，自定义hook的命名就是在函数名前加 use，函数名由 saveInfo 改为 useSaveInfo 即可。

hubert39641020

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React常用面试题

jsx是JavaScript的一种语法扩展，它跟模板语言很接近，但是它充分具备JavaScript的能力JSX就是用来声明React当中的元素，React使用JSX来描述用户界面JSX语法糖允许前端开发者使用我们最熟悉的类HTML标签语法来创建虚拟DOM在降低学习成本。
复制链接

扫一扫