反应面试准备

1。 useState 和 useRef 之间有什么区别？

答：-

• useState 用于在函数组件中声明状态变量。当状态改变时，组件会重新渲染。

另一方面，

• useRef 返回一个可变的 ref 对象，其 .current 属性使用传递的参数 (initialValue) 进行初始化。

• 返回的对象将在组件的整个生命周期内持续存在。

• useRef 的一个常见用例是强制访问子组件的属性。需要注意的是，对 ref 的 .current 属性的更改不会导致组件重新渲染。

2。 React 中的门户是什么？

• 假设在某些场景下我们需要在根 DOM 节点之外渲染一个组件，这里我们可以使用 Portal。

• 我们可以将它用于 Modal / 一些 Pop-up 组件。

3。为什么我们需要 super in class 组件？

答：-

• 在调用 super() 之前，子类构造函数无法使用 this 引用。

• 如果你不调用 super()，JavaScript 将抛出错误，因为它没有初始化。这是因为在调用 super() 之前，子类上下文中的 this 尚未初始化。
  

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 会增加应用程序的内存使用量，因为它在内存中存储组件的先前版本。

性能问题：

• 虽然这些钩子和 React.memo 旨在优化性能，但过度使用它们实际上会产生相反的效果。

• 例如，useMemo 和 useCallback 都有成本，如果它们阻止的计算不比使用钩子的成本更昂贵，则最终可能会降低性能。

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中文网其他相关文章！