面试题：React组件端口化在微服务架构中的基本实现方式

端口定义

概念：在React组件端口化适配微服务架构中，端口可理解为组件对外暴露的接口，用于与其他微服务组件交互。
实现方式：通常在React组件中通过属性（props）来定义端口。例如，创建一个UserInfo组件，可能接收userId作为端口属性，用于获取特定用户信息。

const UserInfo = ({ userId }) => {
    // 组件逻辑
    return <div>User {userId} Info</div>;
};

数据传递

通过props传递：这是React组件间最常见的数据传递方式。对于端口化组件，父组件将数据作为属性传递给子组件端口。例如，有一个App组件包含UserInfo组件：

const App = () => {
    const userId = 1;
    return <UserInfo userId={userId} />;
};

状态管理工具：当涉及复杂数据传递或跨多层组件传递数据时，可使用状态管理工具，如Redux或MobX。以Redux为例，先定义action、reducer来管理数据，组件通过connect（或useSelector、useDispatch钩子）来获取和更新数据。

// action
const FETCH_USER = 'FETCH_USER';
const fetchUser = (userId) => ({
    type: FETCH_USER,
    payload: userId
});

// reducer
const userReducer = (state = {}, action) => {
    switch (action.type) {
        case FETCH_USER:
            return { ...state, userId: action.payload };
        default:
            return state;
    }
};

// 组件使用
import { useSelector, useDispatch } from'react-redux';
const UserInfo = () => {
    const userId = useSelector(state => state.userId);
    const dispatch = useDispatch();
    const handleFetch = () => {
        dispatch(fetchUser(1));
    };
    return (
        <div>
            <button onClick={handleFetch}>Fetch User</button>
            {userId && <div>User {userId} Info</div>}
        </div>
    );
};

与其他微服务组件交互的基础方法

HTTP请求：利用fetch、axios等库进行HTTP请求与其他微服务交互。例如，UserInfo组件需要从另一个微服务获取用户详细信息：

import axios from 'axios';
const UserInfo = ({ userId }) => {
    const [userData, setUserData] = useState(null);
    useEffect(() => {
        const fetchUserData = async () => {
            try {
                const response = await axios.get(`/api/users/${userId}`);
                setUserData(response.data);
            } catch (error) {
                console.error('Error fetching user data:', error);
            }
        };
        if (userId) {
            fetchUserData();
        }
    }, [userId]);
    return (
        <div>
            {userData && <div>{userData.name}</div>}
        </div>
    );
};

消息队列：借助像RabbitMQ、Kafka等消息队列系统实现组件间异步通信。React组件可通过相应客户端库发送和接收消息。例如，使用RabbitMQ的amqplib库：

import amqp from 'amqplib';
const sendMessage = async (message) => {
    const connection = await amqp.connect('amqp://localhost');
    const channel = await connection.createChannel();
    const queue = 'user-updates';
    await channel.assertQueue(queue);
    channel.sendToQueue(queue, Buffer.from(message));
    console.log('Message sent to the queue');
    await channel.close();
    await connection.close();
};
// 在组件中调用
const UserInfo = () => {
    const handleUpdate = () => {
        sendMessage('User updated');
    };
    return (
        <div>
            <button onClick={handleUpdate}>Update User</button>
        </div>
    );
};

GraphQL：如果微服务采用GraphQL架构，React组件可使用react - apollo等库来与GraphQL服务器交互。定义查询和变异（mutation）来获取和更新数据。

import { gql, useQuery } from '@apollo/client';
const GET_USER = gql`
    query GetUser($userId: ID!) {
        user(userId: $userId) {
            name
            age
        }
    }
`;
const UserInfo = ({ userId }) => {
    const { data, loading, error } = useQuery(GET_USER, {
        variables: { userId }
    });
    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;
    return (
        <div>
            <div>{data.user.name}</div>
        </div>
    );
};

星途面试题库

面试题：React组件端口化在微服务架构中的基本实现方式

知识考点

面试题答案

端口定义

数据传递

与其他微服务组件交互的基础方法