// React.memo包裹组件，实现浅比较，只有props变化才重新渲染

const MyComponent = React.memo((props) => {

return (

<div>

{props.data}

</div>

);

});

import React, { useCallback, useMemo } from'react';

const ParentComponent = () => {

const data = [1, 2, 3, 4, 5];

// 使用useCallback缓存函数，避免每次渲染都重新创建

const handleClick = useCallback(() => {

console.log('按钮被点击了');

}, []);

// 使用useMemo缓存计算结果，只有data变化时才重新计算

const filteredData = useMemo(() => data.filter(item => item > 2), [data]);

return (

<div>

<button onClick={handleClick}>点击我</button>

{filteredData.map(item => (

<div key={item}>{item}</div>

))}

</div>

);

};

import React, { useState } from'react';

const Counter = () => {

// 定义count状态和更新函数setCount

const [count, setCount] = useState(0);

// 定义list状态和更新函数setList

const [list, setList] = useState([]);

const handleIncrement = () => {

// 批量更新状态，确保状态更新的一致性

setCount(prevCount => prevCount + 1);

setList(prevList => [...prevList, count]);

};

return (

<div>

<p>Count: {count}</p>

<button onClick={handleIncrement}>增加计数</button>

<ul>

{list.map((item, index) => (

<li key={index}>{item}</li>

))}

</ul>

</div>

);

};

import React, { useReducer } from'react';

// 定义reducer函数，处理不同action类型的状态更新

const reducer = (state, action) => {

switch (action.type) {

case 'INCREMENT':

return { count: state.count + 1 };

case 'DECREMENT':

return { count: state.count - 1 };

default:

return state;

}

};

const CounterWithReducer = () => {

// 使用useReducer初始化状态和dispatch函数

const [state, dispatch] = useReducer(reducer, { count: 0 });

return (

<div>

<p>Count: {state.count}</p>

<button onClick={() => dispatch({ type: 'INCREMENT' })}>增加</button>

<button onClick={() => dispatch({ type: 'DECREMENT' })}>减少</button>

</div>

);

};

// 父组件

const Parent = () => {

const handleChildData = (data) => {

console.log('子组件传递的数据:', data);

};

return (

<div>

{/* 将函数作为props传递给子组件 */}

<Child onData={handleChildData} />

</div>

);

};

// 子组件

const Child = ({ onData }) => {

const sendData = () => {

const data = 'Hello from child';

// 调用父组件传递的函数，传递数据

onData(data);

};

return (

<div>

<button onClick={sendData}>发送数据给父组件</button>

</div>

);

};

import React, { createContext, useState } from'react';

// 创建Context对象

const MyContext = createContext();

const ParentComponent = () => {

const [data, setData] = useState('初始数据');

return (

<MyContext.Provider value={{ data, setData }}>

<div>

<Brother1 />

<Brother2 />

</div>

</MyContext.Provider>

);

};

const Brother1 = () => {

const { data } = React.useContext(MyContext);

return (

<div>

<p>Brother1: {data}</p>

</div>

);

};

const Brother2 = () => {

const { setData } = React.useContext(MyContext);

const updateData = () => {

setData('新数据');

};

return (

<div>

<button onClick={updateData}>更新数据</button>

</div>

);

};

import React, { useState } from'react';

// 定义接口，约束props的类型

interface CounterProps {

initialCount: number;

}

const CounterWithTypeScript: React.FC<CounterProps> = ({ initialCount }) => {

// 定义count状态和更新函数setCount，指定count的类型为number

const [count, setCount] = useState(initialCount);

const handleIncrement = () => {

setCount(prevCount => prevCount + 1);

};

return (

<div>

<p>Count: {count}</p>

<button onClick={handleIncrement}>增加计数</button>

</div>

);

};

// 这里简单示例微前端主应用加载子应用的代码

import React from'react';

const MicroFrontendApp = () => {

return (

<div>

{/* 这里可以通过动态加载脚本的方式引入子应用 */}

<iframe src="https://sub-app-url.com" />

</div>

);

};