谈谈React跨组件通信

2023-09-05 05:54:30

React 中的跨组件通信：解开跨组件交互的艺术

在 React 的世界中，组件是构建用户界面的基本模块。这些组件是独立的、可重复使用的实体，需要相互通信以实现复杂的功能。掌握 React 中的跨组件通信技术对于构建高效、健壮的应用程序至关重要。

1. props：传递数据的单向通道

props（属性）是一种用于从父组件向子组件传递数据的单向通道。它们是不可变的，这意味着子组件不能修改它们。这有助于维持组件之间的松散耦合和单向数据流。

// 父组件
const ParentComponent = () => {
  const name = 'React';
  return <ChildComponent name={name} />;
};

// 子组件
const ChildComponent = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

2. state：组件内部的可变数据

state 是一种组件内部的状态，用于存储组件的私有数据。它与 props 不同，state 是可变的，这意味着组件可以对其进行修改。state 通常用于存储用户输入或组件的内部状态。

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

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

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

// 子组件
const ChildComponent = (props) => {
  return (
    <div>
      <h1>Count: {props.count}</h1>
      <button onClick={props.handleIncrement}>Increment</button>
    </div>
  );
};

3. context：在组件树中共享数据

context 是一种在组件树中传递数据的机制。它允许嵌套组件访问父组件中的数据，而无需通过 props 显式传递。context 非常适合在广泛分布的组件之间共享数据。

// 创建 Context 对象
const ThemeContext = React.createContext({
  theme: 'light',
  toggleTheme: () => {},
});

// 父组件
const ParentComponent = () => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <ChildComponent />
    </ThemeContext.Provider>
  );
};

// 子组件
const ChildComponent = () => {
  const context = useContext(ThemeContext);

  return (
    <div>
      <h1>Current theme: {context.theme}</h1>
      <button onClick={context.toggleTheme}>Toggle theme</button>
    </div>
  );
};

4. Redux：集中式状态管理

Redux 是一个流行的状态管理库，用于在 React 应用程序中管理全局状态。它采用单一数据源和纯函数的设计理念，使状态管理更加清晰和可预测。

// 创建 Redux store
const store = createStore(rootReducer);

// 父组件
const ParentComponent = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  const handleIncrement = () => {
    dispatch({ type: 'INCREMENT' });
  };

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

// 子组件
const ChildComponent = (props) => {
  return (
    <div>
      <h1>Count: {props.count}</h1>
      <button onClick={props.handleIncrement}>Increment</button>
    </div>
  );
};