首页 > 其他分享 >React常见的面试题

React常见的面试题

时间:2024-04-11 10:12:09浏览次数:21  
标签:面试题 const 函数 Hooks 常见 React useState 组件

1、什么是React?

React是一个用于构建用户界面的javascript库。用户界面由按钮、文本和图像等小单元内容构建而成的。

2、React的特点是什么?

(1)、组件化 (2)、虚拟dom (3)、单向数据流 (4)、JSX语法 (5)、高效性能 (6)、生态系统丰富

3、什么是JSX?

JSX是一种JavaScript的语法扩展,它允许在JavaScript中编写类似HTML的代码。它是React的核心之一,用于描述UI组件的结构和样式。

4、React组件有哪些类型?

函数组件:使用函数来定义组件

const App = (props) => {
  function handleAdd() {
     //执行代码
  }
   return (
    <div className="App">
    <button onClick="{handleAdd}">按钮</button>
    </div>
   )
}
 

类组件:使用ES6类来定义组件

class App extends React.Component {
   constructor(props) {
        super(props);
    }
    handleAdd = () => {
      //执行代码
    }
  render(){
    return (
       <div className="App">
         <button onClick="{this.handleAdd}">按钮</button>
       </div>
    )
  }
}
 

区别?

1、语法:

类组件是ES6中的class语法创建的,继承了React.Component类,并通过render方法返回组件的UI的。 函数组件是使用函数来创建的,直接返回UI的。

2、组件定义:

类组件是一个类,可以有自己的状态(state)可以定义生命周期的方法和其他自定义方法。 函数组件是一个纯函数,没有自己的状态,只接收props作为参数,并返回组件的UI。

3、性能:

类组件在底层实现上更复杂,因为它要处理类的实例化、继承、方法绑定等。 函数组件相对于类组件更轻量级,执行率更高。

4、Hooks支持:

类组件是使用生命周期方法来管理组件的状态和副作用。 函数组件是通过React Hooks引入useState、useEffect等钩子函数、使得函数组件也能管理状态和处理副作用。

5、可读性和代码里量:

函数组件通常比类组件更简洁、可读性更好、尤其是用Hooks来管理状态时。 类组件可能需要更多的代码来完成相同的功能,因为它们需要去声明和管理state、生命周期的方法等。

5、什么是props?

props是React中传递给组件的属性。它是只读的,不能在组件内部更改。可以把它当做一个组件的配置。

6、什么是state?

state是React中用于存储组件内部状态的对象。它是可变的,可以在组件内部更改。当state发生变化时,组件将重新渲染。

class App extends React.Component {
    constructor(props: any) {
        super(props)
        this.state = {
            count: 1
        }
    }
    handleClick = () => {
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {
        return (
            <div className="App">
                <button onClick={this.handleClick}>{this.state.count}</button>
            </div>
        )
    }
}

export default App;
 

7、什么是生命周期方法?

生命周期方法是React中的一组特殊的方法,它们在组件的生命周期中被调用。这些方法使我们能够在组件的不同阶段执行特定的操作,例如初始化组件、更新组件、卸载组件等。

8、React有哪些生命周期方法?

主要有三个生命周期阶段: 1、挂载阶段:组件被创建并添加到DOM中。 2、更新阶段:组件的props和state发生变化时,组件重新渲染。 3、销毁阶段:组件被DOM中移除。

constructor()

static getDerivedStateFromProps()

render()

componentDidMount()

shouldComponentUpdate()

getSnapshotBeforeUpdate()

componentDidUpdate()

componentWillUnmount()

9、什么是constructor()方法?

constructor()是React组件的构造函数。它在组件被创建时调用,并且可以用于初始化组件状态和绑定方法。

10、什么是render()方法?

render()是React组件的核心方法之一。它返回组件虚拟DOM结构,并负责处理组件渲染。

11、什么是componentDidMount()方法?

componentDidMount()是React组件的生命周期之一。它在组件被添加到DOM中后调用,并且可以执行一些初始化操作,比如获取数据或者添加事件监听器。

12、什么是shouldComponentUpdate()方法?

shouldComponentUpdate()是React组件的生命周期之一。它在组件的props和state发生变化时被调用,并且可以用于决定是否需要重新渲染组件。

13、什么是componentDidUpdate()方法?

componentDidUpdate()是React组件的生命周期之一。它在组件的props和state发生变化后被调用,并且可以用于执行一些更新操作,比如更新DOM或者重新获取数据。

14、什么是componentWillUnmount()方法?

componentWillUnmount()是React组件的生命周期之一。它在组件被卸载之前被调用,并且可以用于执行一些清理操作,比如取消事件监听器和清除定时器。

15、什么是setState()方法?

setState()是React组件的方法之一。它用于更新组件状态,并且触发组件重新渲染。

16、什么是React Router?

React Router是一个用于构建单页应用程序的React库。它允许我们在应用程序中定义路由,并且可以根据URL的变化来渲染不同的组件。

17、React Router中有哪些组件?

1、BrowserRouter:用于在应用程序中启用HTML5历史路由。

2、HashRouter:用于在应用程序中启用哈希路由。

3、Route:用于定义应用程序中的路由规则。

4、Switch:用于在多个路由规则中选择一个。

5、Link:用于在应用程序中导航到其他页面。

18、什么是Redux?

Redux是一个用于管理应用程序状态的JavaScript库。它是一个单向数据流的架构,可以让我们更好地组织和管理应用程序的状态。

19、Redux中有哪些核心概念?

Store:用于管理应用程序的状态。

Action:用于描述发生的事件。

Reducer:用于处理Action并更新状态。

Dispatch:用于将Action发送到Reducer。

20、什么是React Redux?

安装Redux和React Redux。 创建一个Redux store。 创建一个Reducer来处理Action并更新状态。 在React组件中使用connect()函数将组件连接到Redux store。

22、什么是React Hooks?

React Hooks是React 16.8中引入的一组函数,它们使我们能够在函数组件中使用状态和其他React功能,而无需使用类组件。

23、React Hooks有哪些?

useState()

useEffect()

useContext()

useReducer()

useCallback()

useMemo()

useRef()

useImperativeHandle()

useLayoutEffect()

useDebugValue()

24、什么是useState()?

useState()是React Hooks中最常用的函数之一。它允许我们在函数组件中使用状态,并且可以在组件的生命周期中保持状态。

import { Button } from 'antd';
import React, { useState } from 'react';

const App: React.FC = () => {
    const [num, setNum] = useState(10);
    const handleClick = () => {
        setNum(num + 1);
    }
    return (
        <div className='App'>
            <p>useState用法:使用状态管理</p>
            <p>{num}</p>
            <Button onClick={handleClick}>新增</Button>
        </div>
    )
}

export default App;
 

25、什么是useEffect()?

useEffect()是React Hooks中的一个函数,它允许我们在函数组件中执行副作用操作,例如获取数据或添加事件监听器。它类似于componentDidMount()和componentDidUpdate()生命周期方法的组合。

import { Button } from 'antd';
import React, { useState, useEffect } from 'react';

const App: React.FC = () => {
    const [num, setNum] = useState(10);
    const [x, setx] = useState(100);
    const handleClick = () => {
        setNum(num + 1);
    }

    /**
     * 在组件 第一次渲染完 && 每一次更新完 调用
     * 等同于 componentDidMount && componentDidUpdate
     */
    useEffect(() => {
        console.log("@1", num, x);
    });

    /**
     * 只在组件 第一次渲染完 调用
     * 等同于 componentDidMount
     */
    useEffect(() => {
        console.log("@2", num, x);
    }, []);

    /**
     * 第一次渲染完 以及 依赖的状态发生改变
     */
    useEffect(() => {
        console.log("@3", num);
    }, [num]);

    /**
     * 返回的函数将在 组件卸载后 被调用
     * 等同于 componentWillUnmount
     */
    useEffect(() => {
        return () => {
            console.log("@4");
        }
    }, []);

    return (
        <div className='App'>
            <p>useState用法:使用状态管理</p>
            <p>{num}</p>
            <Button onClick={handleClick}>新增</Button>
            <p>useEffect用法:使用周期函数</p>
            <p>{num}</p>
            <Button onClick={() => { setNum(num + 1) }}>处理</Button>
            <p>{x}</p>
            <Button onClick={() => { setx(x + 1) }}>处理</Button>
        </div>
    )
}

export default App;
 

26、什么是useContext()?

useContext()是React Hooks中的一个函数,它允许我们在函数组件中使用React上下文。它可以让我们轻松地在组件之间共享数据。

import { Button } from 'antd';
import React, { useState, useContext } from 'react';

const themeContext = React.createContext(null);

const App: React.FC = () => {
    const [theme, setTheme] = useState("red");
    return (
            <themeContext.Provider value={{ theme, setTheme }}>
                <div className={`App ${theme}`}>
                    <p>{theme}</p>
                    <div>
                        <Child />
                    </div>
                </div>
            </themeContext.Provider>
    )
}

const Child: React.FC = () => {
    const { setTheme } = useContext(themeContext);
    return (
        <div>
            <button onClick={() => setTheme("red")}>red</button>
        </div>
    );
}

export default App;
 

27、什么是useReducer()?

useReducer()是React Hooks中的一个函数,它允许我们在函数组件中使用Redux-style的reducer来管理状态。它可以让我们更好地组织和管理组件的状态。

import { Button } from 'antd';
import React, { useState, useReducer } from 'react';
const initialState = { count: 0 };
const reducer = (state: any, action: any) => {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            throw new Error();
    }
}
const App: React.FC = () => {
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
        <div className='App'>
            <p>count: {state.count}</p>
            <Button onClick={() => dispatch({ type: 'increment' })}>+</Button>
            <Button onClick={() => dispatch({ type: 'decrement' })}>-</Button>
        </div>
    )
}
export default App;
 

28、什么是useCallback()?

useCallback()是React Hooks中的一个函数,它允许我们在函数组件中缓存回调函数,以避免在每次渲染时重新创建它们。这可以提高组件的性能。

/**父组件:**/
import { Button } from 'antd';
import React, { useState, useCallback } from 'react';
import Child1 from './Child1';
import Child2 from './Child2';
const App: React.FC = () => {
    const [val, setVal] = useState('');
    const [name, setName] = useState('');
    const handler1 = useCallback(() => {
        setVal("娃哈哈");
    }, [val]);
    const handler2 = useCallback(() => {
        setName("张三");
    }, [name]);
    return (
        <div className='App'>
            <p>{val}</p>
            <Child1 handler={handler1} />
            <p>{name}</p>
            <Child2 handler={handler2} />
        </div>
    )
}
export default App;
 
/**子组件1:如果子组件是类组件,则可以使用shouldComponentUpdate 获取 PureComponent 做优化**/
import { Button } from "antd"
import React from "react"

export default class Child1 extends React.PureComponent {
    render() {
        return (
            <div>
                <Button onClick={this.props.handler}>处理1</Button>
            </div>
        )
    }
}
 
/**子组件2:如果子组件是函数组件,则需要useCallback和memo配合使用 */
import { Button } from "antd";
import React, { memo } from "react";

const Child2: React.FC = memo(function Child2({ handler }) {
    return (
        <div>
            <Button onClick={handler}>处理2</Button>
        </div>
    )
});

export default Child2;
 

29、什么是useMemo()?

useMemo()是React Hooks中的一个函数,它允许我们在函数组件中缓存计算结果,以避免在每次渲染时重新计算它们。这可以提高组件的性能。

30、什么是useRef()?

useRef()是React Hooks中的一个函数,它允许我们在函数组件中创建一个可变的引用。它可以用于保存组件的状态,或者引用DOM元素。

31、什么是useImperativeHandle()?

useImperativeHandle()是React Hooks中的一个函数,它允许我们在函数组件中自定义暴露给父组件的实例值。这可以用于创建可重用的组件。

32、什么是useLayoutEffect()?

useLayoutEffect()是React Hooks中的一个函数,它类似于useEffect(),但是它在DOM更新之前同步触发。这可以用于处理需要同步更新DOM的情况。

33、什么是useDebugValue()?

useDebugValue()是React Hooks中的一个函数,它允许我们在React开发工具中调试自定义Hooks的值。

34、什么是React Native?

React Native是一个用于构建原生移动应用程序的React库。它允许我们使用JavaScript和React构建跨平台的应用程序,并且可以在iOS和Android上运行。

35、React Native中有哪些核心组件?

View:类似于HTML中的div元素,用于包含其他组件。

Text:用于显示文本。

Image:用于显示图像。

TextInput:用于获取用户输入的文本。

ScrollView:用于滚动页面。

FlatList:用于显示列表。

TouchableOpacity:用于创建可点击的元素。

36、什么是React Native CLI?

React Native CLI是React Native的命令行工具,用于创建和管理React Native应用程序。它允许我们在本地开发环境中构建和运行React Native应用程序。

37、什么是Expo?

Expo是一个用于构建React Native应用程序的开发工具和服务平台。它提供了一些有用的功能,例如快速原型设计、自动构建和发布、设备测试等。

38、什么是React Native Navigation?

React Native Navigation是一个用于在React Native应用程序中实现导航的库。它提供了一组易于使用的API,用于管理应用程序的导航栈和屏幕之间的转换。它支持多种导航类型,例如堆栈导航、标签导航和抽屉导航,并且可以与Redux等状态管理库集成使用。React Native Navigation还具有高性能、流畅的动画效果和自定义主题的能力,使得开发人员可以轻松地创建美观、易于使用的导航界面。

标签:面试题,const,函数,Hooks,常见,React,useState,组件
From: https://www.cnblogs.com/Jansens520/p/18128190

相关文章

  • 办卡常见问题合集(必看,可发给用户)
    1.卡刚刚激活,手机信号显示是4G网答:耐心等待一下,刚刚激活的手机卡会有数据延迟,需要放置在5G环境下过一会才能接入5G网络。还可以试试看把流量卡放到主卡槽上,某些牌子的手机可能只有主卡槽支持5G,这还不行可以找运营商官方客服免费开通SA,相信博主的卡都是支持4G 5G的2.不是说有3......
  • 单线程Reactor模型
    1.如何理解reactorreactor是一种设计模式。用于处理事件驱动的系统。reactor模式,主要有两个组件:reactor反应器:负责监听所有事件,当事件发生时,调用相应的处理程序。reactor本身时一个事件循环,负责处理I/O事件。handler处理程序:处理特点类型的事件。当reactor接收......
  • 从React Router V5 升级到 V6
    1.升级react-router包npminstallreact-router-dom@[VERSION_NUMBER]替换VERSION_NUMBER为我们要安装的版本,或者如果我们想要最新版本,则替换为“latest”,如下所示:npminstallreact-router-dom@6或者npminstallreact-router-dom@latest2.使用Routes替换Switch......
  • Qt 对话框常见类型
    前言        对话框是GUI程序设计中不可或缺的组成部分,很多不能或者不适合放入主窗口的功能组件都必须放在对话框中。        Qt使用QDialog类实现对话框,通常会设计一个类继承QDialog类。QDialog类(及其派生类,以及所有Qt:Dialog类型的类)对其parent......
  • 机器学习——常见模型评估指标
    目录一.模型评估综述1.1什么是模型评估1.2评估类型1.3模型泛化能力1.4过拟合与欠拟合1.4.1过拟合1.4.2欠拟合二.常见的分类模型评估方式2.1混淆矩阵2.2准确率(Accuracy)2.3精确率(Precision)2.4召回率(Recall)2.5F1-score2.6ROC曲线及AUC值2.7PR曲线三.PR曲线和ROC曲线的......
  • 面试题记录
    1.#编写一个函数来查找字符串数组中的最长公共前缀。#如果不存在公共前缀,返回空字符串#""。##示例#1:#输入:strs=["flower","flow","flight"]#输出:"fl"#示例#2:#输入:strs=["dog","racecar","car"]#输出:""#解释:......
  • H.265视频直播点播录像EasyPlayer.js流媒体播放器用户常见问题及解答
    EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器,可支持多种流媒体协议播放,无须安装任何插件,起播快、延迟低、兼容性强,使用非常便捷。今天我们来汇总下用户常见的几个问题及解答。1、EasyPlayer.js播放多路H.265视频时,CPU直接被占满该如何处理?答:因为H.265解码比较占......
  • Linux清除记录的常见方式
    隐藏远程SSH登陆记录清除当前的history记录隐藏Vim的操作记录隐藏文件修改时间锁定文件清除系统日志痕迹1.隐藏远程SSH登陆记录隐身登录系统,不会被w、last等指令检测到。[email protected]/bin/bash-i-T表示不分配伪终端,/usr/bin/bash表示在登录后......
  • react组件之cmao-ui,编写流程图的功能介绍
    流程组件介绍:该组件参考老版力软learun框架中的jquery流程组件进行重构,改写为react的组件。样式、操作、交互方式大致相近。该组件依赖的react版本大于18(不是不能做到兼容旧版react,而是要写就写新版本的,还用老的干嘛)下载//npm下载npminstallcmao-ui引用该组件是......
  • Vue — Vue面试题:Vue3.0 特性
    CompositionAPI(组合式API):CompositionAPI允许开发者将逻辑按照功能或者相关性进行组织,而不是按照选项的不同部分(如data、methods、computed等)来分散代码。这种方式更灵活、更易于复用和维护,特别适用于编写大型复杂的组件。基于Proxy的响应式系统:Vue3中的响应式系统基于ES6......