第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 中用于处理引用的三个不同的概念。
- useRef: useRef是 React 提供的一个 Hook 函数，用于在函数组件中创建一个可变的引用。它返回一个可变的 ref 对象，可以在组件的整个生命周期中保持不变。可以使用ref.current来访问和修改 ref 对象的值。useRef通常用于保存组件中的变量或 DOM 元素的引用。
- ref: ref是 React 的一个属性，可以用于在类组件中创建一个可变的引用。它与useRef的作用类似，也可以用来保存组件中的变量或 DOM 元素的引用。在类组件中，可以通过this.refName来访问和修改 ref 对象的值。
- forwardRef: forwardRef是一个高阶组件（Higher-Order Component），用于将 ref 传递给子组件。当你需要在父组件中访问子组件的 DOM 元素或组件实例时，可以使用forwardRef来传递 ref。通过使用forwardRef，可以将 ref 传递给子组件并在子组件中使用它。
总结：
- useRef是一个 Hook 函数，用于在函数组件中创建可变的引用。
- ref是 React 的一个属性，用于在类组件中创建可变的引用。
- forwardRef是一个高阶组件，用于将 ref 传递给子组件。
它们的区别在于使用场景和用法，但都可以用于创建可变的引用。
下面是它们的用法示例：
- 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() 方法来聚焦它。
- 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() 方法来聚焦它。
- 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函数，用于在函数组件中管理状态。它们之间有以下几点区别：
-
用途不同：
useState用于在函数组件中声明和更新状态，而useRef用于在函数组件中存储和访问引用值。 -
更新触发不同：当使用
useState更新状态时，组件会重新渲染，而使用useRef更新引用值时，组件不会重新渲染。 -
初始值处理不同：
useState可以接受一个初始值作为参数，而useRef的初始值只能通过current属性赋值。 -
引用值的稳定性：
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 返回的函数（如果存在）。文章来源：https://www.toymoban.com/news/detail-543321.html
useEffect(() => {
// 在挂载、依赖列表变化及卸载时执行
return () => {
// 在下一次 useEffect 执行前执行
}
}, [dep1, dep2]);
注意: 这个函数的作用通常是清除 effect 留下的副作用，例如取消定时器、取消订阅等等。在函数中应该清理掉之前设置的任何 effect，在组件卸载时避免不必要的内存泄漏和资源浪费。文章来源地址https://www.toymoban.com/news/detail-543321.html
到了这里，关于【React】每日精选5题 2023-7-6的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
