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还具有高性能、流畅的动画效果和自定义主题的能力,使得开发人员可以轻松地创建美观、易于使用的导航界面。
本文来自博客园,作者:小珍珠在河里敲代码,转载请注明原文链接:https://www.cnblogs.com/Jansens520/p/18128190