React 面试题第二部分

最新推荐文章于 2024-10-13 19:05:48 发布

m0_70009662

最新推荐文章于 2024-10-13 19:05:48 发布

阅读量37

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_70009662/article/details/133363801

版权

1.列举十个常用的React 内置Hooks

useState:让函数组件具有维持状态的能力
useEffect:执行副作用
useCallback:避免不必要的函数重新创建、避免不必要的子组件重新渲染
useMemo:缓存计算的结果
useRef:在多次渲染之间共享数据
useContext:定义全局状态
useLayoutEffect
useReducer
useDebugValue
useImperativeHandle

2.为什么会有React Hooks 它解决了那些问题

如果你使用过 React 一段时间，你也许会熟悉一些解决此类问题的方案，比如 render props 和高阶组件。但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。如果你在 React DevTools 中观察过 React 应用，你会发现由 providers，consumers，高阶组件，render props 等其他抽象层组成的组件会形成“嵌套地狱”。你可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。 Hook 使你在无需修改组件结构的情况下复用状态逻辑。这使得在组件间或社区内共享 Hook 变得更便捷。

3.React Hooks 如何模拟组件的生命周期

import React, { useState, useEffect, useRef } from "react"

interface Props {
  name: string;
}

const MyComponent: React.FC<Props> = ({ name }) => {
  const [count, setCount] = useState(0);
  const isMounted = useRef(false);

  useEffect(() => {
    console.log(`${name} is mounted`);
    isMounted.current = true;

    return () => {
      console.log(`${name} is unmounted`);
      isMounted.current = false;
    };
  }, []);

  useEffect(() => {
    if (isMounted.current) {
      console.log("count has been updated");
    }
  }, [count]);

  useEffect(() => {
    console.log("name has been updated");
  }, [name]);

  useEffect(() => {
    console.log("component has been updated");
  });

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Hello {name}!</h1>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  )
}

export default MyComponent;

在这个例子中，我们定义了一个MyComponent函数组件，它接受一个名为name的属性。我们使用useState Hook来定义一个名为count的状态和一个名为setCount的函数，它用于更新状态。我们还使用useRef Hook来创建一个名为isMounted的引用，以检查组件是否已经挂载。

在组件的useEffect Hook中，我们通过传递一个空数组作为第二个参数来模拟componentDidMount方法。在这个方法中，我们使用console.log语句记录组件的挂载和卸载状态，并设置isMounted的当前值以反映组件的挂载状态。

我们还使用了两个useEffect Hook来模拟componentDidUpdate方法。第一个是通过传递count作为第二个参数来触发的，它在count的值被更新时记录一个消息。第二个useEffect是不带依赖项的，它在每次更新时都会被调用，并记录一个通用的组件更新消息。

最后，我们定义了一个点击处理程序，它使用setCount来增加count的值。在组件的返回语句中，我们使用JSX来渲染组件的内容。

使用这种方式，我们可以在函数组件中模拟类组件的生命周期方法，并且可以清晰地控制组件的状态和行为。