面试题：React中Props和Context在数据传递方面的主要区别

数据传递场景

Props：常用于父子组件间的数据传递，是一种较为直接的传递方式。父组件将数据作为属性传递给子组件，用于控制子组件的展示或行为。
Context：适用于跨组件层级传递数据，当组件嵌套较深，需要将数据传递给深层子组件，而不必在每一层手动传递Props时使用。

传递方式

Props：在父组件中通过标签属性形式传递给子组件，子组件通过props接收。例如：

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const message = 'Hello from parent';
  return <ChildComponent text={message} />;
}

export default ParentComponent;

// 子组件
import React from 'react';

function ChildComponent(props) {
  return <div>{props.text}</div>;
}

export default ChildComponent;

Context：通过创建Context对象，使用Provider组件包裹需要传递数据的组件树，消费组件可以使用Context.Consumer或useContext Hook来获取数据。例如：

import React, { createContext, useState } from'react';

// 创建Context对象
const MyContext = createContext();

function App() {
  const [count, setCount] = useState(0);
  return (
    <MyContext.Provider value={{ count, setCount }}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const { count, setCount } = React.useContext(MyContext);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default App;

适用范围

Props：适用于简单、直接的数据传递场景，数据传递层级较浅。如果数据只影响直接子组件的渲染或行为，Props是很好的选择。
Context：适用于需要在多个组件间共享数据，且组件层级较深，不想在中间层级组件手动传递Props的场景。但由于Context会使数据流向变得不那么清晰，应避免过度使用。

星途面试题库

面试题：React中Props和Context在数据传递方面的主要区别

知识考点

面试题答案

数据传递场景

传递方式

适用范围