前端面试题193（详解react组件中的数据传递）

在React中，组件间的数据传递是通过props（属性）和state（状态）来实现的。下面我会详细解释这两种方式，并给出示例代码。

1. Props（属性）

Props是父组件向子组件传递数据的主要方式。它们是只读的，意味着你在子组件中不能修改从父组件接收到的props。

示例代码：

• 父组件(ParentComponent.js)

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

function ParentComponent() {
  const message = "Hello from Parent";

  return (
    <div>
      <ChildComponent message={message} />
    </div>
  );
}

export default ParentComponent;

• 子组件(ChildComponent.js)

import React from 'react';

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

export default ChildComponent;

在这个例子中，ParentComponent通过message这个prop将数据传递给了ChildComponent。

2. State（状态）

State用于组件内部可变数据的管理。当state改变时，React会自动重新渲染组件，确保UI与数据保持同步。

示例代码：

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  incrementCount = () => {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

export default Counter;

在这个例子中，Counter组件维护了一个自己的状态count，并通过incrementCount方法更新它。每次点击按钮，都会触发状态更新，从而重新渲染组件并显示新的计数。

Context API

对于多层组件间的数据传递，React提供了Context API，它允许你在组件树中传递数据，而无需手动将props逐层传递。

示例代码：

• 创建Context

import React from 'react';

const ThemeContext = React.createContext();

export default ThemeContext;

• Provider组件使用Context

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

class App extends React.Component {
  state = {
    theme: 'light',
  };

  toggleTheme = () => {
    this.setState(prevState => ({
      theme: prevState.theme === 'light' ? 'dark' : 'light',
    }));
  };

  render() {
    return (
      <ThemeContext.Provider value={{theme: this.state.theme, toggleTheme: this.toggleTheme}}>
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

• Consumer组件使用Context

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

function Toolbar(props) {
  return (
    <div>
      <ThemeContext.Consumer>
        {({theme, toggleTheme}) => (
          <button onClick={toggleTheme}>Toggle {theme} Theme</button>
        )}
      </ThemeContext.Consumer>
    </div>
  );
}

export default Toolbar;

在这个例子中，ThemeContext被用来在App组件和嵌套很深的Toolbar组件之间共享主题信息，而无需通过中间组件传递props。

以上就是React中数据传递的基本方式，包括props、state以及Context API。根据实际需求选择合适的方式进行数据管理与传递。