面试题：React自定义Hook的数据共享与依赖处理

定义自定义Hook：

使用useState和useEffect来管理状态和处理副作用。例如：

import { useState, useEffect } from'react';

const useSharedData = () => {
  const [sharedState, setSharedState] = useState({});

  const updateSharedState = (newState) => {
    setSharedState((prevState) => ({...prevState,...newState }));
  };

  useEffect(() => {
    // 在这里可以处理依赖更新相关的逻辑，比如订阅某些外部数据源的变化
    // 例如，如果有一个外部API需要定期拉取数据更新共享状态
    const intervalId = setInterval(() => {
      // 假设这里有一个获取新数据的函数getNewData
      const newData = getNewData();
      updateSharedState(newData);
    }, 5000);

    return () => clearInterval(intervalId);
  }, []);

  return { sharedState, updateSharedState };
};

在不同组件中使用该Hook：

不同组件可以导入并使用这个自定义Hook。例如：

import React from'react';
import useSharedData from './useSharedData';

const ComponentA = () => {
  const { sharedState, updateSharedState } = useSharedData();
  return (
    <div>
      <p>Component A: {JSON.stringify(sharedState)}</p>
      <button onClick={() => updateSharedState({ keyFromA: 'valueFromA' })}>Update from A</button>
    </div>
  );
};

const ComponentB = () => {
  const { sharedState, updateSharedState } = useSharedData();
  return (
    <div>
      <p>Component B: {JSON.stringify(sharedState)}</p>
      <button onClick={() => updateSharedState({ keyFromB: 'valueFromB' })}>Update from B</button>
    </div>
  );
};

确保依赖的正确更新：
- 在useEffect中，通过依赖数组来控制副作用的触发。如果依赖数组为空[]，useEffect中的回调函数只会在组件挂载和卸载时执行，适用于一些初始化和清理的操作，如上面示例中的定时器。
- 如果依赖数组中有某些变量，例如const [count, setCount] = useState(0); useEffect(() => { // 依赖count变化时执行的逻辑 }, [count]);，那么只有当count的值发生变化时，useEffect中的回调函数才会执行，这样可以避免不必要的渲染。
- 在更新共享状态时，通过setSharedState的函数式更新方式（setSharedState((prevState) => ({...prevState,...newState }))），确保状态更新是基于前一个状态，从而避免丢失状态更新。同时，这种方式可以保证React能够正确识别状态变化，进而触发依赖该状态的组件的重新渲染。

面试题：React自定义Hook的数据共享与依赖处理

知识考点

面试题答案