面试题：在React复合组件模式下如何处理状态提升与数据共享

状态提升实现数据共享的步骤

确定共享状态：分析组件树，找出需要在多个组件间共享的状态数据。
提升状态到共同祖先：将这些共享状态提升到所有需要该状态组件的最近共同祖先组件中。这样，共享状态就集中管理在一个地方。
传递状态和回调：共同祖先组件通过props将状态传递给需要的子组件，并将修改状态的回调函数也传递下去。子组件通过调用这些回调函数通知祖先组件状态需要更新。

提升状态时需注意的问题

性能问题：状态提升可能导致不必要的重新渲染。例如，如果一个深层子组件频繁触发状态更新，可能会引起整个组件树的重新渲染。可以通过使用React.memo、shouldComponentUpdate等机制来优化。
复杂度增加：共享状态提升到共同祖先后，祖先组件可能会变得复杂，管理多种不同功能相关的状态。要注意代码的可维护性，合理拆分和组织代码。
数据一致性：确保状态更新的逻辑正确，避免出现数据不一致的情况。例如，在多个子组件同时请求更新共享状态时，要确保更新的顺序和逻辑正确。

代码示例

import React, { useState } from 'react';

// 子组件A
const ChildA = ({ count, incrementCount }) => {
  return (
    <div>
      <p>子组件A: {count}</p>
      <button onClick={incrementCount}>子组件A增加计数</button>
    </div>
  );
};

// 子组件B
const ChildB = ({ count }) => {
  return (
    <div>
      <p>子组件B: {count}</p>
    </div>
  );
};

// 父组件
const Parent = () => {
  const [count, setCount] = useState(0);

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

  return (
    <div>
      <ChildA count={count} incrementCount={incrementCount} />
      <ChildB count={count} />
    </div>
  );
};

export default Parent;

在上述代码中，count状态被提升到Parent组件，ChildA和ChildB通过props从Parent获取count状态。ChildA还接收了incrementCount回调函数来更新count状态，从而实现了组件间的数据共享。

面试题：在React复合组件模式下如何处理状态提升与数据共享

知识考点

面试题答案

状态提升实现数据共享的步骤

提升状态时需注意的问题

代码示例