【React】每日精选5题

第1题：怎么在代码中判断一个 React 组件是 class component 还是 function component？

可以使用JavaScript的typeof运算符和React的Component类来进行判断。
代码示例：

function isClassComponent(component) {
  return (
    typeof component === 'function' &&
    !!component.prototype.isReactComponent
  );
}

// 示例用法
const MyComponent = () => <div>Hello, I'm a function component!</div>;
const MyClassComponent = class extends React.Component {
  render() {
    return <div>Hello, I'm a class component!</div>;
  }
};

console.log(isClassComponent(MyComponent)); // false
console.log(isClassComponent(MyClassComponent)); // true

上面定义了一个名为isClassComponent的函数，它接受一个组件作为参数。函数内部使用typeof运算符来判断该组件是否为函数类型，并通过检查component.prototype.isReactComponent属性来确定是否为Class组件。

第2题：useRef / ref / forwardsRef 的区别是什么?

useRef、ref和forwardRef是 React 中用于处理引用的三个不同的概念。

1. useRef: useRef是 React 提供的一个 Hook 函数，用于在函数组件中创建一个可变的引用。它返回一个可变的 ref 对象，可以在组件的整个生命周期中保持不变。可以使用ref.current来访问和修改 ref 对象的值。useRef通常用于保存组件中的变量或 DOM 元素的引用。
2. ref: ref是 React 的一个属性，可以用于在类组件中创建一个可变的引用。它与useRef的作用类似，也可以用来保存组件中的变量或 DOM 元素的引用。在类组件中，可以通过this.refName来访问和修改 ref 对象的值。
3. forwardRef: forwardRef是一个高阶组件（Higher-Order Component），用于将 ref 传递给子组件。当你需要在父组件中访问子组件的 DOM 元素或组件实例时，可以使用forwardRef来传递 ref。通过使用forwardRef，可以将 ref 传递给子组件并在子组件中使用它。

总结：

• useRef是一个 Hook 函数，用于在函数组件中创建可变的引用。
• ref是 React 的一个属性，用于在类组件中创建可变的引用。
• forwardRef是一个高阶组件，用于将 ref 传递给子组件。
  它们的区别在于使用场景和用法，但都可以用于创建可变的引用。

下面是它们的用法示例：

1. useRef：
   useRef是React提供的一个Hook函数，用于在函数组件中创建可变的引用。它返回一个可变的ref对象，该对象的 .current 属性可以用来存储和访问任何可变值。

import React, { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

在上面的示例中，我们使用useRef创建了一个名为inputRef的引用，并将其绑定到<input>元素上。当点击按钮时，我们可以通过inputRef.current访问到该输入框，并调用 .focus() 方法来聚焦它。

2. ref：
   ref是一个通用的React属性，用于引用DOM元素、组件实例或其他React元素。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  handleClick() {
    this.inputRef.current.focus();
  }

  render() {
    return (
      <div>
        <input ref={this.inputRef} type="text" />
        <button onClick={this.handleClick.bind(this)}>Focus Input</button>
      </div>
    );
  }
}

在上面的示例中，我们使用React.createRef()创建了一个名为inputRef的引用，并将其绑定到<input>元素上。在handleClick方法中，我们可以通过this.inputRef.current访问到该输入框，并调用 .focus() 方法来聚焦它。

3. forwardRef：
   forwardRef是一个高阶组件（Higher-Order Component），用于将ref从父组件传递到子组件。

const ChildComponent = React.forwardRef((props, ref) => {
  return <input ref={ref} type="text" />;
});

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  handleClick() {
    this.inputRef.current.focus();
  }

  render() {
    return (
      <div>
        <ChildComponent ref={this.inputRef} />
        <button onClick={this.handleClick.bind(this)}>Focus Input</button>
      </div>
    );
  }
}

在上面的示例中，我们使用React.forwardRef将ref传递给ChildComponent。在ParentComponent中，我们创建了一个名为inputRef的引用，并将其传递给ChildComponent。在handleClick方法中，我们可以通过this.inputRef.current访问到子组件中的输入框，并调用 .focus() 方法来聚焦它。

总结来说，useRef适用于函数组件，ref适用于类组件，而forwardRef适用于将ref从父组件传递到子组件。它们在处理引用时提供了不同的灵活性和用法。

第3题： useRef和useState区别？

useRef和useState都是React提供的Hook函数，用于在函数组件中管理状态。它们之间有以下几点区别：

1. 用途不同：useState用于在函数组件中声明和更新状态，而useRef用于在函数组件中存储和访问引用值。

2. 更新触发不同：当使用useState更新状态时，组件会重新渲染，而使用useRef更新引用值时，组件不会重新渲染。

3. 初始值处理不同：useState可以接受一个初始值作为参数，而useRef的初始值只能通过current属性赋值。

4. 引用值的稳定性：useRef返回的引用值在组件的整个生命周期中保持不变，而useState每次重新渲染时会返回一个新的状态值。

总结来说，useState用于在函数组件中管理可变的状态，而useRef用于在函数组件中存储和访问引用值，且不会触发组件的重新渲染。

第4题：useEffect 的第二个参数, 传空数组和传依赖数组有什么区别？

在 React 中，useEffect 是一个常用的 Hook，它用于处理组件生命周期中的副作用。

useEffect 接收两个参数，第一个是要执行的函数，第二个是依赖数组（可选）。

当传递空数组 [] 时，useEffect 只会在组件挂载和卸载时调用一次。这种情况下，useEffect 不会监听任何变量，并且不会对组件进行重新渲染。

useEffect(() => {
  // 只在挂载和卸载时执行
}, []);

当传递依赖数组时，useEffect 会在组件挂载和依赖项更新时调用。当依赖项中的任何一个值发生变化时，useEffect 都将被重新调用。如果依赖数组为空，则每次组件重新渲染时都会调用 useEffect。依赖项为空数组的Effect 不会在组件任何的props 或state 发生改变时重新运行。

useEffect(() => {
  // 在挂载、依赖列表变化及卸载时执行
}, [dep1, dep2]);

下面是这两种情况的总结：

• 当传递空数组 [] 时，useEffect 只会在组件挂载和卸载时调用一次，不会对组件进行重新渲染。
• 当传递依赖数组时，useEffect 会在组件挂载和依赖项更新时调用，每次更新时都会检查依赖项列表是否有变化，如果有变化则重新执行。

如果 useEffect 中使用了闭包函数，则应该确保所有引用的变量都在依赖项中被显示声明，否则可能会导致不必要的重新渲染或者无法获取最新的状态。

第5题：如果在 useEffect 的第一个参数中 return 了一个函数，那么第二个参数分别传空数组和传依赖数组，该函数分别是在什么时候执行？

在 React 中，当 useEffect 第一个参数中返回一个函数时，这个函数会在组件卸载时执行。当传递空数组 [] 时，useEffect 只会在组件挂载和卸载时调用一次，因此返回的函数也只会在组件卸载时执行一次。

useEffect(() => {
  // 在挂载时执行

  return () => {
    // 在卸载时执行
  }
}, []);

当传递依赖数组时，useEffect 会在组件挂载和依赖项更新时调用，因此返回的函数也会随着组件更新而执行。每次组件重新渲染时都会检查依赖项列表是否有变化，如果有变化则重新执行 useEffect，并在执行新的 useEffect 前先执行上一个 useEffect 返回的函数（如果存在）。

useEffect(() => {
  // 在挂载、依赖列表变化及卸载时执行

  return () => {
    // 在下一次 useEffect 执行前执行
  }
}, [dep1, dep2]);

注意: 这个函数的作用通常是清除 effect 留下的副作用，例如取消定时器、取消订阅等等。在函数中应该清理掉之前设置的任何 effect，在组件卸载时避免不必要的内存泄漏和资源浪费。