面试题：React Context在函数组件中跨多层嵌套组件传递数据的优化

利用React Context优化数据传递

创建Context：在顶层组件中使用createContext创建一个Context对象。例如：

import React from 'react';
const MyContext = React.createContext();
export default MyContext;

提供数据：在顶层组件的render方法中，通过MyContext.Provider将数据传递下去。

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

class TopLevelComponent extends React.Component {
  state = {
    data: 'Some important data'
  };
  render() {
    return (
      <MyContext.Provider value={this.state.data}>
        {/* 组件树 */}
      </MyContext.Provider>
    );
  }
}

消费数据：在底层组件中，可以使用MyContext.Consumer来消费数据，或者在函数式组件中使用useContext Hook。

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

// 类组件方式
class BottomLevelComponent extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {data => <div>{data}</div>}
      </MyContext.Consumer>
    );
  }
}

// 函数式组件方式
import React from'react';
import { useContext } from'react';
import MyContext from './MyContext';

const BottomLevelFunctionalComponent = () => {
  const data = useContext(MyContext);
  return <div>{data}</div>;
};

性能问题及解决方案

性能问题：
- 不必要的重渲染：当顶层组件中MyContext.Provider的value prop发生变化时，所有使用该Context的组件都会重新渲染，即使它们依赖的数据并没有真正改变。这可能会导致性能下降，尤其是在组件树较大的情况下。
解决方案：
- 使用Memoization：
  - 类组件：对于类组件，可以使用shouldComponentUpdate生命周期方法来手动控制组件是否应该重新渲染。例如：

class BottomLevelComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextContext) {
    // 只在Context中的数据真正变化时才重新渲染
    return nextContext!== this.context;
  }
  render() {
    return <div>{this.context}</div>;
  }
  static contextType = MyContext;
}

 - **函数式组件**：对于函数式组件，可以使用`React.memo`高阶组件来包裹组件，它会对props进行浅比较，只有当props变化时才重新渲染。对于Context，需要将Context数据作为props传递给被`React.memo`包裹的组件，然后在组件内部使用`useContext`。例如：

import React from'react';
import { useContext } from'react';
import MyContext from './MyContext';

const InnerBottomLevelFunctionalComponent = ({ contextData }) => {
  return <div>{contextData}</div>;
};

const BottomLevelFunctionalComponent = React.memo(() => {
  const data = useContext(MyContext);
  return <InnerBottomLevelFunctionalComponent contextData={data} />;
});

拆分Context：如果可能，将大的Context拆分成多个小的Context，这样每个Context的变化只会影响依赖它的组件，而不会导致整个组件树的重新渲染。例如，如果有用户相关数据和配置相关数据，可以分别创建UserContext和ConfigContext。

星途面试题库

面试题：React Context在函数组件中跨多层嵌套组件传递数据的优化

知识考点

面试题答案

利用React Context优化数据传递

性能问题及解决方案