组件间通信方式
1. 父组件向子组件传递数据（通过 props）
这是最为常见的通信方式，父组件能借助 props 把数据传递给子组件。
// 子组件
const ChildComponent = (props) => {
return <div>{props.message}</div>;
};
// 父组件
const ParentComponent = () => {
const message = "Hello from parent!";
return <ChildComponent message={message} />;
};
2. 子组件向父组件传递数据（通过回调函数）
子组件可以通过调用父组件传递的回调函数来向父组件传递数据。
// 子组件
const ChildComponent = (props) => {
const handleClick = () => {
props.onClick("Data from child");
};
return <button onClick={handleClick}>Send data to parent</button>;
};
// 父组件
const ParentComponent = () => {
const handleChildData = (data) => {
console.log(data);
};
return <ChildComponent onClick={handleChildData} />;
};
3. 兄弟组件间通信（通过共同的父组件）
若要实现兄弟组件间的通信，可以借助共同的父组件来传递数据。
// 子组件 1
const ChildComponent1 = (props) => {
const handleClick = () => {
props.onSendData("Data from ChildComponent1");
};
return <button onClick={handleClick}>Send data to sibling</button>;
};
// 子组件 2
const ChildComponent2 = (props) => {
return <div>{props.data}</div>;
};
// 父组件
const ParentComponent = () => {
const [dataFromChild1, setDataFromChild1] = React.useState("");
const handleDataFromChild1 = (data) => {
setDataFromChild1(data);
};
return (
<div>
<ChildComponent1 onSendData={handleDataFromChild1} />
<ChildComponent2 data={dataFromChild1} />
</div>
);
};
4. 跨层级组件通信（Context API）
当需要在多层嵌套的组件间共享数据时，可以使用 Context API。
// 创建 Context
const MyContext = React.createContext();
// 提供数据的组件
const ProviderComponent = () => {
const value = "Data from context";
return (
<MyContext.Provider value={value}>
<ChildComponent />
</MyContext.Provider>
);
};
// 接收数据的组件
const ChildComponent = () => {
const data = React.useContext(MyContext);
return <div>{data}</div>;
};
5. 发布 - 订阅模式
使用第三方库（如 pubsub-js）
方式：组件可以发布消息到特定主题，其他组件订阅该主题以接收消息。
示例：
import PubSub from 'pubsub-js';
// 发布消息的组件
const Publisher = () => {
const handlePublish = () => {
PubSub.publish('newMessage', "Message from publisher");
};
return <button onClick={handlePublish}>Publish</button>;
};
// 订阅消息的组件
const Subscriber = () => {
React.useEffect(() => {
const token = PubSub.subscribe('newMessage', (msg, data) => {
console.log(data);
});
return () => {
PubSub.unsubscribe(token);
};
}, []);
return <div>Listening for messages</div>;
};
6. 状态管理库（如 Redux、Mobx 等）
对于大型应用，使用状态管理库能够更高效地管理组件间的通信。下面以 Redux 为例简单说明：
// 安装依赖：npm install redux react-redux
import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';
// 定义 reducer
const counterReducer = (state = { count: 0 }, action) => {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
};
// 创建 store
const store = createStore(counterReducer);
// 组件
const CounterComponent = () => {
const count = useSelector((state) => state.count);
const dispatch = useDispatch();
return (
<div>
<p>Count: {count}</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
</div>
);
};
// 根组件
const App = () => {
return (
<Provider store={store}>
<CounterComponent />
</Provider>
);
};
6. 事件总线（自定义）
方式：创建一个全局的事件总线对象，组件可以在该对象上触发事件和监听事件。
示例：
const eventBus = {
events: {},
on(event, callback) {
if (!this.events[event]) {
this.events[event] = [];
}
this.events[event].push(callback);
},
emit(event, data) {
if (this.events[event]) {
this.events[event].forEach(callback => callback(data));
}
},
off(event, callback) {
if (this.events[event]) {
this.events[event] = this.events[event].filter(cb => cb!== callback);
}
}
};
// 发送事件的组件
const Sender = () => {
const handleSend = () => {
eventBus.emit('newEvent', "Event data");
};
return <button onClick={handleSend}>Send event</button>;
};
// 接收事件的组件
const Receiver = () => {
React.useEffect(() => {
const callback = (data) => {
console.log(data);
};
eventBus.on('newEvent', callback);
return () => {
eventBus.off('newEvent', callback);
};
}, []);
return <div>Listening for events</div>;
};
谈谈 redux
Redux 是一个用于管理 JavaScript 应用程序状态的可预测状态容器，最初为 React 应用设计，但也可以与其他视图库（如 Vue、Angular）结合使用。它采用单向数据流架构，使得状态的变化可预测且易于调试，下面从多个方面详细介绍 Redux。
核心概念
- store： 这是 Redux 应用的核心，它是一个单一的对象，保存着整个应用的状态树。并且整个应用只能有一个 store。例如，在一个简单的待办事项应用中，store 可能包含一个存储所有待办事项的数组。
- action： 它是一个描述状态变化的普通 JavaScript 对象，其中 type 属性是必需的，用于描述要执行的操作类型。比如，在待办事项应用里，添加一个新的待办事项可以通过一个 action 来表示，其 type 为 ADD_TODO，同时可能包含新待办事项的具体内容。
- reducer： reducer 是一个纯函数，接收当前的状态和一个 action 作为参数，返回一个新的状态。它负责根据 action 的类型来更新 store 中的状态。在待办事项应用中，当接收到 ADD_TODO 这个 action 时，reducer 会将新的待办事项添加到状态中的待办事项数组里。
- 单向数据流： Redux 遵循单向数据流的原则，即数据的流动是单向且可预测的。具体流程为：视图触发 action，action 被发送到 reducer，reducer 根据 action 更新 store 中的状态，最后 store 的变化会反映到视图上。
工作流程
- 触发 action： 在视图层（如 React 组件）中，用户的操作（如点击按钮）会触发一个 action。例如，点击 “添加待办事项” 按钮会触发一个 ADD_TODO 的 action。
- 发送 action 到 reducer： 触发的 action 会被发送到 reducer 函数。
- reducer 更新状态： reducer 函数根据接收到的 action 的类型，对当前的状态进行处理，并返回一个新的状态。
- store 更新： store 接收到 reducer 返回的新状态后，会更新自身的状态。
- 视图更新： 当 store 的状态发生变化时，与之连接的视图组件会自动重新渲染，以反映最新的状态。
优点
- 可预测性： 由于 reducer 是纯函数，相同的输入总是会产生相同的输出，这使得状态的变化变得可预测，便于调试和测试。
- 易于调试： Redux 提供了时间旅行调试功能，允许开发者在开发过程中回溯和重现状态的变化，方便定位和解决问题。
- 服务器端渲染支持： Redux 可以很好地支持服务器端渲染，因为它的状态管理是独立于视图层的，便于在服务器端和客户端之间共享状态。
- 社区和生态系统： Redux 拥有庞大的社区和丰富的生态系统，有许多插件和中间件可供使用，如 redux-thunk、redux-saga 等，用于处理异步操作。
缺点
- 代码冗余： 使用 Redux 时，需要编写大量的样板代码，如 action 创建函数、reducer 函数等，这会增加代码的复杂度和开发成本。
- 学习曲线较陡： 对于初学者来说，理解 Redux 的核心概念（如 store、action、reducer 等）和工作流程可能会有一定的难度。
适用场景
- 复杂状态管理： 当应用的状态管理变得复杂，多个组件之间需要共享和同步状态时，Redux 可以帮助管理这些状态，提高代码的可维护性。
- 多人协作开发： 在多人协作的项目中，Redux 的可预测性和规范的状态管理方式有助于团队成员更好地理解和维护代码。
- 时间旅行调试需求： 如果应用需要进行时间旅行调试，或者需要记录和重现用户的操作，Redux 是一个不错的选择。
扫一扫
548
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
