# vite-react-project

**Repository Path**: jansens/vite-react-project

## Basic Information

- **Project Name**: vite-react-project
- **Description**: react项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-03
- **Last Updated**: 2024-04-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React + TypeScript + Vite
# 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中的一个函数，它允许我们在函数组件中缓存计算结果，以避免在每次渲染时重新计算它们。这可以提高组件的性能。

```
/**父组件：**/
import { Button } from 'antd';
import React, { useState, useMemo } from 'react';
import Child1 from './Child1';
const App: React.FC = () => {
    const [name, setName] = useState('');
    const changeName = (name:any) => {
        return name + '------名字发生了改变';
    }

    const Name = useMemo(()=> changeName(name), [name]);
    return (
        <div className='App'>
            <p>{name}</p>
            <Child1 Name={Name} />
        </div>
    )
}
export default App;
```
```
/**子组件 */
import { Button } from "antd";
import React, { memo } from "react";

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

export default Child1;
```

## 30、什么是useRef()？

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

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

let prev : any;
const App: React.FC = () => {
    const [num, setNum] = useState(10);
    const btnBox = useRef(null);
    if(!prev){
      prev = btnBox;
    } else {
        console.log(prev === btnBox);
    }
    /**
     * 只在组件 第一次渲染完 调用
     * 等同于 componentDidMount
     */
    useEffect(() => {
        console.log(btnBox.current);
    }, []);

    return (
        <div className='App'>
            <p>{num}</p>
            <Button ref={btnBox} onClick={() => { setNum(num + 1) }}>处理</Button>
        </div>
    )
}
export default App;
```

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