欢迎与我联系   

React常见的面试题

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还具有高性能、流畅的动画效果和自定义主题的能力,使得开发人员可以轻松地创建美观、易于使用的导航界面。

posted @ 2024-04-11 10:04  小珍珠在河里敲代码  阅读(1382)  评论(0编辑  收藏  举报