React 进阶面试题, React 的函数式组件是否具有生命周期?为什么?
React 进阶面试题, React 的函数式组件是否具有生命周期?为什么?
QA
Step 1
Q:: React 的函数式组件是否具有生命周期？为什么？
A:: React 的函数式组件本身并没有类组件那样的生命周期方法。然而，自从 React 16.8 引入了 Hooks，我们可以在函数式组件中使用 useEffect、useLayoutEffect 等 Hook 来模拟类组件的生命周期行为。useEffect 可用于执行类似于 componentDidMount、componentDidUpdate 和 componentWillUnmount 的操作，而 useLayoutEffect 则更接近于 componentDidMount 和 componentDidUpdate 的同步效果。
Step 2
Q:: React 中的 useEffect 和 useLayoutEffect 有什么区别？
A:: useEffect 是在组件渲染到屏幕之后执行的，它不会阻塞浏览器的更新绘制过程，因此它是异步的。相反，useLayoutEffect 会在所有 DOM 变更之后同步执行，这意味着它在浏览器完成绘制之前就已经执行完毕，因此适合需要在屏幕更新前进行 DOM 操作的场景。
Step 3
Q:: 在什么情况下使用 useEffect 清理函数？
A:: useEffect 的清理函数主要用于组件卸载或更新时执行清理工作。例如，在组件中添加了事件监听器或定时器，需要在组件卸载时移除这些副作用，以防止内存泄漏。在 useEffect 中返回一个函数，该函数将在组件卸载或更新前调用，以清理副作用。
Step 4
Q:: 如何在 React 的函数式组件中模仿 shouldComponentUpdate？
A:: 在函数式组件中，可以使用 React.memo 来实现类似 shouldComponentUpdate 的行为。React.memo 是一个高阶组件，只有当传递给组件的 props 发生变化时，组件才会重新渲染。这与类组件中的 shouldComponentUpdate 方法类似。