1。 useState 和 useRef 之间有什么区别？
答：-
useState 用于在函数组件中声明状态变量。当状态改变时，组件会重新渲染。
useRef 返回一个可变的 ref 对象，其 .current 属性使用传递的参数 (initialValue) 进行初始化。
返回的对象将在组件的整个生命周期内持续存在。
useRef 的一个常见用例是强制访问子组件的属性。需要注意的是，对 ref 的 .current 属性的更改不会导致组件重新渲染。
2。 React 中的门户是什么？
3。为什么我们需要 super in class 组件？
答：-
class Parent {
constructor() {
this.name = 'Parent';
}
}
class Child extends Parent {
constructor() {
super(); // Must call super() here
this.name = 'Child';
}
}
登录后复制
4。 useCallback vs useMemo vs React.memo
答：-
-
useCallback 是一个钩子，它将返回回调函数的记忆版本，该函数仅在依赖项之一发生更改时才会更改。
- 将回调传递给依赖引用相等性的优化子组件来防止不必要的渲染时，它非常有用。
import React, { useState, useCallback } from 'react';
function Example() {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={increment}>
Click me
</button>
</div>
);
}
登录后复制
-
useMemo 是一个将返回记忆值的钩子，仅在依赖项之一发生更改时才重新计算。它对于昂贵的计算很有用。
import React, { useState, useMemo } from 'react';
function Example() {
const [count, setCount] = useState(0);
const expensiveValue = useMemo(() => {
// Perform expensive calculation here
return computeExpensiveValue(count);
}, [count]);
return (
<div>
<p>Expensive value: {expensiveValue}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
登录后复制
-
React.memo 是一个高阶组件，它会记住函数组件的结果，并仅在 props 更改时才渲染它。
- 对于在给定相同 props 的情况下渲染相同结果的组件来说，防止不必要的渲染很有用。
import React from 'react';
const MyComponent = React.memo(function MyComponent(props) {
// render logic here
});
export default MyComponent;
登录后复制
注意：-
useCallback 用于记忆函数，useMemo 用于记忆值，React.memo 用于记忆组件。
5。如果我们过度使用上面的 useMemo、Memo 和 useCallback 功能会发生什么？
内存使用情况：
- 过度使用 React.memo 会增加应用程序的内存使用量，因为它在内存中存储组件的先前版本。
性能问题：
6。 React 组件与 React 元素有什么区别？
答：-
反应组件：
- React 组件是一个函数或类，它可以选择接受输入并返回 React 元素。组件可以重复使用，也可以保持私有状态
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
登录后复制
反应元素：
- React Element 是一个普通对象，它描述了您希望通过 DOM 节点或其他组件在屏幕上显示的内容。元素的 props 中可以包含其他元素。
- 创建一个 React 元素很便宜。元素一旦创建，就永远不会改变。
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
登录后复制
7。 Redux的核心原理？
答：-
- 单一事实来源
- 状态是只读的（永远不要直接更新）
- Pure Functions (Reducer) 中进行了更改
- 仅适用于可序列化对象。
8。区分算法、协调和 React Fiber？
答：- 同一文章的单独文章
深入探讨 React 的优化算法和流程
9。 React 中的综合事件是什么？
Ans：- 我们确保事件在不同浏览器之间应该保持一致。
例如：- PreventDefault()、stopPropagation()
10。提升状态？
Ans:- 当多个组件需要共享相同的变化数据时，建议将共享状态提升到它们最近的共同祖先。
以上是反应面试准备的详细内容。更多信息请关注PHP中文网其他相关文章！
