面试题：React中使用React.createContext初始化默认值及跨组件传递数据

请简述在React中如何使用React.createContext初始化默认值，并实现一个简单的跨组件数据传递示例，例如有父组件App，中间组件Middle，子组件Child，在App中初始化一个上下文默认值，通过Middle传递到Child中并显示。

40.9万热度

难度

前端开发React

使用React.createContext初始化默认值：
- React.createContext接受一个默认值作为参数。这个默认值会在组件树中没有匹配的Provider时使用。
- 示例代码如下：
```
import React from'react';

// 创建上下文并初始化默认值
const MyContext = React.createContext('default value');
```

实现跨组件数据传递示例：

父组件App：

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

const App = () => {
  const valueToPass = 'new context value';
  return (
    <MyContext.Provider value={valueToPass}>
      <Middle />
    </MyContext.Provider>
  );
};

export default App;

中间组件Middle：

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

const Middle = () => {
  return (
    <div>
      <Child />
    </div>
  );
};

export default Middle;

子组件Child：

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

const Child = () => {
  const contextValue = React.useContext(MyContext);
  return (
    <div>
      <p>The context value is: {contextValue}</p>
    </div>
  );
};

export default Child;

MyContext.js文件：

import React from'react';

const MyContext = React.createContext('default value');

export { MyContext };

以上代码展示了如何在React中使用React.createContext初始化默认值，并通过Provider和useContext实现跨组件数据传递。App组件作为父组件，通过Provider提供上下文值，Child组件在深层组件树中通过useContext获取上下文值并显示。Middle组件在中间起到传递作用，但并不处理上下文相关逻辑。

面试题：React中使用React.createContext初始化默认值及跨组件传递数据

知识考点

面试题答案