React中的组件通讯方式

React 中的组件通信方法

在 React 中，组件通信是构建复杂应用的重要部分。下面将介绍一些常见的组件通信方法以及它们的具体例子。

1. 属性传递（Props）

属性传递是 React 中最基本的组件通信方法。它允许父组件将数据传递给子组件，子组件可以通过 props 来访问这些数据。

示例：

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

const ParentComponent = () => {
  const data = "Hello from Parent";
  return <ChildComponent message={data} />;
};

export default ParentComponent;

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

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

export default ChildComponent;

2. 回调函数

通过在父组件中定义回调函数，并将它们传递给子组件，子组件可以调用这些回调函数来触发父组件中的操作。

示例：

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

const ParentComponent = () => {
  const handleEvent = (dataFromChild) => {
    console.log(dataFromChild);
  };
  
  return <ChildComponent callback={handleEvent} />;
};

export default ParentComponent;

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

const ChildComponent = (props) => {
  const sendDataToParent = () => {
    props.callback("Data from child");
  };

  return (
    <button onClick={sendDataToParent}>Send Data to Parent</button>
  );
};

export default ChildComponent;

在 React 中，组件之间传递参数通常通过 props 和上下文进行。以下是两种主要的传递参数的方式：

3. 通过上下文（Context）传递参数

使用上下文可以在React组件之间共享数据，而不必显式地通过组件树传递props。上下文可以在组件树中全局共享数据。

示例：

创建上下文提供程序：

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

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

export default MyContext;

使用上下文：

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

const ChildComponent = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
};

export default ChildComponent;

这就是React中两种常见的组件之间传递参数的方式。通过组合使用这些方法，可以使React应用程序中的组件相互通信，并共享必要的数据。

组件的状态提升也是子组件之间的通讯方法

你希望两个组件的状态始终同步更改。要实现这一点，可以将相关 state 从这两个组件上移除，并把 state 放到它们的公共父级，再通过 props 将 state 传递给这两个组件。这被称为“状态提升”。

Context

在 React 中，Context Provider 是 Context API 提供的一个组件，用于向整个组件树下的组件提供共享的数据。Context Provider 通常与 useContext 钩子一起使用，使得组件树中的任何组件都可以访问被提供的上下文数据。

下面是一个简单的示例，演示了如何使用 Context Provider 在组件树中共享数据。

首先，我们定义一个 Context，然后使用 Context Provider 提供数据，并让其他组件可以访问这个数据。

// MyContext.js
import React, { createContext, useState } from 'react';

export const MyContext = createContext();

export const MyContextProvider = ({ children }) => {
  const [value, setValue] = useState("default value");

  return (
    <MyContext.Provider value={{ value, setValue }}>
      {children}
    </MyContext.Provider>
  );
};

示例中，我们创建了一个 MyContext，然后定义了一个 MyContextProvider 组件。MyContextProvider 使用 useState 来创建一个变量并将其传递给 MyContext.Provider。现在，我们可以在 MyContext 的 Consumer（使用 useContext 或者在类组件中使用 Consumer）中访问和使用这个共享的数据。

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

const ExampleComponent = () => {
    const { value, setValue } = useContext(MyContext);

    return (
        <div>
            <p>Value: {value}</p>
            <button onClick={() => setValue("new value")}>Update Value</button>
        </div>
    );
};

export default ExampleComponent;

在上面的 ExampleComponent 中，我们使用了 useContext 来获取 MyContextProvider 提供的数据，并在组件中使用该数据。

希望这个示例能够清楚地展示 Context Provider 的使用方式。Context Provider 是 React 中非常有用的工具，用于在整个组件树中共享数据。

dva 管理state

在 dva 中，组件之间的参数传递可以通过 connect 方法连接组件到 dva 的 model 和 dispatch，从而实现相关参数的传递。下面是一个简单的示例，演示了在 dva 中如何进行组件之间的参数传递：

// 定义 model
// models/example.js
export default {
  namespace: 'example',
  state: {
    data: ''
  },
  reducers: {
    save(state, { payload: { data } }) {
      return { ...state, data };
    },
  },
  effects: {
    *fetch({ payload }, { call, put }) {
      // 异步请求数据
      const data = yield call(someService.fetchData, payload);
      yield put({ type: 'save', payload: { data } });
    },
  },
};

// 连接组件
// components/ExampleComponent.js
import React, { Component } from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';

class ExampleComponent extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'example/fetch', payload: { id: 123 } });
  }

  render() {
    const { data } = this.props;
    return (
      <div>{data}</div>
    );
  }
}

ExampleComponent.propTypes = {
  data: PropTypes.string,
};

export default connect(({ example }) => ({
  data: example.data,
}))(ExampleComponent);

示例中，我们创建了一个名为 example 的 model，并定义了 save reducer 用于保存数据，以及 fetch effect 用于异步请求数据。然后，在 ExampleComponent 组件中，我们使用 connect 方法连接了 example model 中的数据，并在 componentDidMount 方法中发起了异步请求。这样，数据就能够在组件之间进行传递和共享了。

通过这种方式，在 dva 中你可以方便地进行组件之间的参数传递和共享，实现更加灵活的数据状态传递和管理。

prop.children参数传递方法

结语

React中的常见的组件通信方法，即属性传递和回调函数。这些方法可以帮助组件在React应用程序中进行数据交流和交互。通过实际编写上述例子，我们可以更好地理解这些通信方法的工作原理。