react里組件通信的幾種方式小結(jié)

更新時間：2024年06月18日 08:54:51 作者：劍九六千里

本文主要介紹了react里組件通信的幾種方式小結(jié),包含了5種方式,主要是props傳遞,回調(diào)函數(shù)作為props,Context,Redux或MobX,refs,具有一定的參考價值,感興趣的可以了解一下

1. props傳遞（父向子通信）:

說明: 父組件通過props屬性向子組件傳遞數(shù)據(jù)。
如何進行: 在父組件中定義子組件時，通過屬性名將值傳給子組件，子組件通過this.props接收。

// 父組件
import ChildProps from "./ChildProps";
function ParentProps() {
    const message = "我是父組件";
    return <ChildProps message={message} />;
}

export default ParentProps;


// 子組件
function ChildProps(props: any) {
    return (<div>
        <span>{props.message}</span>
        <br />
        <span>我是子組件</span>
    </div>);
}

export default ChildProps;

在這里插入圖片描述

2. 回調(diào)函數(shù)作為props（子向父通信）:

說明: 子組件通過調(diào)用父組件傳遞的回調(diào)函數(shù)，將信息傳回給父組件。
如何進行: 父組件定義一個方法，將其作為prop傳遞給子組件；子組件在適當?shù)臅r候調(diào)用這個函數(shù)，傳遞數(shù)據(jù)或事件信息。

// 父組件
import ChildrenEmit from "./ChildrenEmit";
function ParentEmit() {
    const handleButtonClick = (value: string) => {
        console.log(value, "ParentEmit: handleButtonClick");
    };
    return (
        <div>
            <ChildrenEmit onButtonClick={handleButtonClick}></ChildrenEmit>
        </div>
    );
}

export default ParentEmit;


// 子組件
function ChildrenEmit (props: { onButtonClick: (arg0: string) => void; }) {
    return (
        <button onClick={() => props.onButtonClick('按鈕被點擊了~')}>
            點擊
        </button>
    )
}

export default ChildrenEmit;

在這里插入圖片描述

3. Context API：

說明: 方式：React提供了一個Context API，允許你在組件樹中傳遞數(shù)據(jù)，而無需手動逐層傳遞props。
如何使用：創(chuàng)建一個Context，使用React.createContext()；在最頂層的組件中使用<MyContext.Provider value={value}>包裹需要共享狀態(tài)的組件樹；在消費組件中使用<MyContext.Consumer>或useContext(MyContext)來訪問上下文中的值。

// MyContext.ts
// 創(chuàng)建Context
import { createContext } from "react";

export const MyContext = createContext('red');

// ParentContext.tsx
// 父組件
import { useContext } from "react";
import { MyContext } from "./MyContext";
import ChildrenContext from "./ChildrenContext";

const ParentContext = () => {
    const contextValue = useContext(MyContext);

    return (
        <MyContext.Provider value={contextValue}>
            <ChildrenContext />
        </MyContext.Provider>
    );
};

export default ParentContext;

// ChildrenContext.tsx
// 子組件
import { useContext } from "react";
import { MyContext } from "./MyContext";
import GrandsonContext from "./GrandsonContext";

const ChildrenContext = () => {
    const contentValue = useContext(MyContext);

    return (
        <div>
            <div>子組件顏色: {contentValue}</div>
            <GrandsonContext></GrandsonContext>
        </div>
    );
};
export default ChildrenContext;

// GrandsonContext.tsx
// 孫組件
import { useContext } from "react";
import { MyContext } from "./MyContext";
import GranddaughterContext from "./GranddaughterContext";

const GrandsonContext = () => {
    const contentValue = useContext(MyContext);

    return (
        <div>
            <div>孫組件1顏色: {contentValue}</div>
            <GranddaughterContext></GranddaughterContext>
        </div>
    );
};

export default GrandsonContext;

// GranddaughterContext.tsx
// 孫組件
import { useContext } from "react";
import { MyContext } from "./MyContext";

const GranddaughterContext = () => {
    const contentValue = useContext(MyContext);
    return (
        <div>
            <div>孫組件2顏色：{contentValue}</div>
        </div>
    );
};

export default GranddaughterContext;

在這里插入圖片描述

4. Redux或MobX等狀態(tài)管理庫：

方式：適用于大型應用，通過將狀態(tài)提升到一個單一的store中管理，任何組件都可以訪問和修改store中的狀態(tài)。
如何使用：引入相應的庫并設置store，使用Provider組件將store包裹在應用的最外層，組件內(nèi)部通過connect函數(shù)（Redux）或Observer（MobX）等與store連接，從而獲取或改變狀態(tài)。

4.1 Redux使用示例

這個例子展示了如何創(chuàng)建一個簡單的計數(shù)器應用，通過Redux管理狀態(tài)。用戶點擊加減按鈕時，會觸發(fā)actions，然后通過reducer更新state，最終React組件根據(jù)新的state重新渲染。

安裝 redux 和和 react-redux 庫。

npm install redux react-redux

創(chuàng)建 Action

// actions.ts
export const increment = () => {
    return { type: 'INCREMENT' };
  };
  
  export const decrement = () => {
    return { type: 'DECREMENT' };
  };

創(chuàng)建 reducer

// reducer.ts
const initialState = { count: 0 };

function counterReducer(state = initialState, action: { type: any; }) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

export default counterReducer;

創(chuàng)建 store

// store.ts
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

創(chuàng)建組件使用

import { connect } from 'react-redux';
import { increment, decrement } from './actions';
import { ReactElement, JSXElementConstructor, ReactNode, ReactPortal, MouseEventHandler } from 'react';

function ParentRedux(props: { count: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined; onIncrement: MouseEventHandler<HTMLButtonElement> | undefined; onDecrement: MouseEventHandler<HTMLButtonElement> | undefined; }) {
  return (
    <div>
      <h1>Counter: {props.count}</h1>
      <button onClick={props.onIncrement}>+</button>
      <button onClick={props.onDecrement}>-</button>
    </div>
  );
}

const mapStateToProps = (state: { count: any; }) => ({
  count: state.count,
});

const mapDispatchToProps = (dispatch: (arg0: { type: string; }) => any) => ({
  onIncrement: () => dispatch(increment()),
  onDecrement: () => dispatch(decrement()),
});

export default connect(mapStateToProps, mapDispatchToProps)(ParentRedux);

根組件導入

import React from "react";
import "./App.css";
import { Provider } from 'react-redux';
import store from './page/redux/store';
import ParentProps from "./page/props/ParentProps";
import ParentEmit from "./page/emit/ParentEmit";
import ParentContext from "./page/context/ParentContext";
import ParentRefs from "./page/refs/ParentRefs";
import ParentRedux from "./page/redux/ParentRedux";

function App() {
    return (
        <div className="App">
            <div className="App-item">
                測試父子傳參：<ParentProps></ParentProps>
            </div>
            <div className="App-item">
                測試子傳父：<ParentEmit></ParentEmit>
            </div>
            <div className="App-item">
                測試context傳參：<ParentContext></ParentContext>
            </div>
            <div className="App-item">
                測試refs傳參：<ParentRefs></ParentRefs>
            </div>
            <Provider store={store}>
                <div className="App-item">
                    測試redux傳參：<ParentRedux></ParentRedux>
                </div>
            </Provider>
        </div>
    );
}

export default App;

在這里插入圖片描述

這個例子展示了如何創(chuàng)建一個簡單的計數(shù)器應用，通過Redux管理狀態(tài)。用戶點擊加減按鈕時，會觸發(fā)actions，然后通過reducer更新state，最終React組件根據(jù)新的state重新渲染。

5. refs：

方式：主要用于訪問DOM元素或在組件之間傳遞一個可變的引用。
如何使用：可以通過React.createRef()創(chuàng)建ref，然后將其附加到特定的React元素上。在組件中，可以通過this.myRef.current訪問DOM元素或在類組件間傳遞ref以直接操作另一個組件的實例。

// ParentRefs.tsx
// 父組件
import { useRef } from "react";
import ChildRefs from "./ChildRefs";

const ParentRefs = () => {
    const childRef = useRef<HTMLInputElement>(null);

    const handleClick = (): void => {
        childRef?.current?.focus();
    };

    return (
        <>
            <ChildRefs ref={childRef} />
            <button onClick={handleClick}>Focus Child Input</button>
        </>
    );
};

export default ParentRefs;

// ChildRefs.tsx
// 子組件
import { forwardRef } from 'react';

const ChildRefs = forwardRef<HTMLInputElement>((props, ref) => {
    return (
        <div>
            <input type="text" ref={ref} />
        </div>
    );
});

export default ChildRefs;

到此這篇關(guān)于react里組件通信的幾種方式小結(jié)的文章就介紹到這了,更多相關(guān)react組件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: