您的位置:首页 > 财经 > 金融 > 广告设计专业好吗_做推广app赚钱的项目_网站策划方案书_网络推广的基本方法

广告设计专业好吗_做推广app赚钱的项目_网站策划方案书_网络推广的基本方法

2024/12/6 15:22:31 来源:https://blog.csdn.net/qq_45444035/article/details/143593346  浏览:    关键词:广告设计专业好吗_做推广app赚钱的项目_网站策划方案书_网络推广的基本方法
广告设计专业好吗_做推广app赚钱的项目_网站策划方案书_网络推广的基本方法

在 React 中,组件是构建应用的基本单位。随着应用的复杂度提升,多个组件之间的协作和数据传递变得越来越重要。React 提供了几种方式来实现组件之间的通信:父子组件通信、兄弟组件通信、跨层级组件通信 等。

一、React 组件通信原理

React 中的组件通信原理基于 单向数据流。这意味着数据总是从父组件流向子组件,通过 props 传递。对于更复杂的组件间通信,React 提供了多种方案。

1. 单向数据流

React 中的数据流是单向的,即父组件向子组件传递数据,子组件不能直接修改父组件的状态。父组件可以通过 props 向子组件传递数据,子组件则可以通过回调函数来通知父组件更新数据。

2. 状态提升 (Lifting State Up)

为了让多个子组件共享状态,React 提供了“状态提升”这一概念。即将多个组件所需的状态提升到它们的共同父组件中,然后通过 props 传递给各个子组件。

3. Context API

对于跨多个层级的组件通信,React 提供了 Context API,允许我们在组件树中传递数据而不需要显式地通过 props 逐层传递。

二、常用的 React 组件通信方法

在 React 中,常见的组件通信方法包括:

  1. 父子组件通信(通过 props 和 state
  2. 兄弟组件通信(通过父组件作为中介)
  3. 跨层级组件通信(通过 Context API

1. 父子组件通信

父子组件通信是 React 中最基本的通信方式。父组件通过 props 将数据传递给子组件,子组件则通过调用父组件传递的函数来更新父组件的状态。

示例代码:父子组件通信
// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';const ParentComponent = () => {const [message, setMessage] = useState("Hello from parent!");// 子组件更新父组件的状态const updateMessage = (newMessage) => {setMessage(newMessage);};return (<div><h1>{message}</h1><ChildComponent onMessageChange={updateMessage} /></div>);
};export default ParentComponent;
// 子组件
import React, { useState } from 'react';const ChildComponent = ({ onMessageChange }) => {const [newMessage, setNewMessage] = useState("");const handleChange = (e) => {setNewMessage(e.target.value);};const handleClick = () => {onMessageChange(newMessage);};return (<div><input type="text" value={newMessage} onChange={handleChange} /><button onClick={handleClick}>Change Parent Message</button></div>);
};export default ChildComponent;

 在这个例子中,ParentComponent 通过 propsChildComponent 传递了一个函数 updateMessage,而子组件通过 onMessageChange 调用该函数,从而修改父组件的状态。

2. 兄弟组件通信

兄弟组件之间无法直接通信,它们需要通过共同的父组件来传递数据。这种方式称为“通过父组件进行通信”。

1. 使用共同父组件传递 Props
示例代码:
// 父组件
import React, { useState } from 'react';
import BrotherOne from './BrotherOne';
import BrotherTwo from './BrotherTwo';const ParentComponent = () => {const [sharedData, setSharedData] = useState("");const updateSharedData = (newData) => {setSharedData(newData);};return (<div><BrotherOne onDataChange={updateSharedData} /><BrotherTwo data={sharedData} /></div>);
};export default ParentComponent;
// 兄弟组件 One
import React, { useState } from 'react';const BrotherOne = ({ onDataChange }) => {const [inputData, setInputData] = useState("");const handleChange = (e) => {setInputData(e.target.value);};const handleSubmit = () => {onDataChange(inputData);};return (<div><input type="text" value={inputData} onChange={handleChange} /><button onClick={handleSubmit}>Send to Brother Two</button></div>);
};export default BrotherOne;
// 兄弟组件 Two
import React from 'react';const BrotherTwo = ({ data }) => {return <div>Received from Brother One: {data}</div>;
};export default BrotherTwo;

在这个例子中,BrotherOne 通过触发 ParentComponent 中传递的回调函数来更新父组件的状态,然后父组件将该状态通过 props 传递给 BrotherTwo,从而实现兄弟组件之间的数据传递。

 2. 使用 React Context 实现兄弟组件传值
示例代码:
import React, { createContext, useState, useContext } from 'react';// 创建一个 Context
const MessageContext = createContext();const BrotherA = () => {const { setMessage } = useContext(MessageContext);return (<div><button onClick={() => setMessage('来自 BrotherA 的消息')}>发送消息到 BrotherB</button></div>);
};const BrotherB = () => {const { message } = useContext(MessageContext);return <div>BrotherB 收到的消息: {message}</div>;
};const Parent = () => {const [message, setMessage] = useState('');return (<MessageContext.Provider value={{ message, setMessage }}><div><BrotherA /><BrotherB /></div></MessageContext.Provider>);
};export default Parent;
  • 我们通过 createContext 创建了一个 MessageContext,它存储了共享的数据(即 message)。

  • MessageContext.Provider 包裹了 BrotherA 和 BrotherB 组件,将共享的数据传递给它们。

  • BrotherA 和 BrotherB 通过 useContext(MessageContext) 获取上下文中的数据。

  • BrotherA 更新 messageBrotherB 接收并展示更新后的信息。

使用 Context 的方式解决了组件层级深时,prop drilling(层层传递 props)的问题,简化了兄弟组件间的通信。

3. 使用 Redux 实现兄弟组件通信 
示例代码:Redux 不仅适用于兄弟组件之间的传值,也能用于整个应用的数据流管理。
import React from 'react';
import { createStore } from 'redux';
import { Provider, useDispatch, useSelector } from 'react-redux';// 定义初始状态和 Reducer
const initialState = { message: '' };const messageReducer = (state = initialState, action) => {switch (action.type) {case 'SET_MESSAGE':return { ...state, message: action.payload };default:return state;}
};// 创建 Redux store
const store = createStore(messageReducer);const BrotherA = () => {const dispatch = useDispatch();return (<div><button onClick={() => dispatch({ type: 'SET_MESSAGE', payload: '来自 BrotherA 的消息' })}>发送消息到 BrotherB</button></div>);
};const BrotherB = () => {const message = useSelector((state) => state.message);return <div>BrotherB 收到的消息: {message}</div>;
};const Parent = () => {return (<Provider store={store}><div><BrotherA /><BrotherB /></div></Provider>);
};export default Parent;
  • 使用 Redux 创建了一个全局状态 message,通过 useDispatch 发送 action 来更新它。
  • BrotherA 通过 dispatch 修改全局状态,BrotherB 通过 useSelector 获取并展示这个状态。
  • Provider 组件将 Redux store 提供给了应用中的所有组件。

Redux 适用于较复杂的应用,尤其是当多个组件需要访问和更新全局状态时。

4.使用自定义事件(Pub/Sub 模式) 
代码示例: import PubSub from 'pubsub-js'  插件
import React, { useState, useEffect } from 'react';
import PubSub from 'pubsub-js' const Brother1 = () => {const sendMessage = () => {PubSub.publish("Hello from Brother 1");};return (<div><button onClick={sendMessage}>Send Message to Brother 2</button></div>);
};const Brother2 = () => {const [message, setMessage] = useState("");useEffect(() => {const handleMessage = (newMessage) => {setMessage(newMessage);};PubSub.subscribe(handleMessage);// 清理订阅return () => {PubSub.unsubscribe(handleMessage)};}, []);return <div>Received message: {message}</div>;
};const Parent = () => {return (<div><Brother1 /><Brother2 /></div>);
};export default Parent;

我们使用一个pubsub-js插件, 来实现发布-订阅机制。Brother1 组件通过 PubSub.publish 发一个message,Brother2组件通过 PubSub.subscribe 接收

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com