WangShuXian6
commented
5 months ago 2. 设计模式布局组件 Design Patterns Layout Components
2. 介绍
3. 屏幕分割器 Screen Splitter
npm create vite@latest react-dp
react
typescript
pnpm i
pnpm i styled-components -S
pnpm run devsrc\components\split-screen.tsx
import React from "react";
import { styled } from "styled-components";
const Container = styled.div`
display: flex;
`;
const Panel = styled.div`
flex: 1;
`;
interface SplitScreenProps {
Left: React.ComponentType;
Right: React.ComponentType;
}
//使用 SplitScreenProps 作为 props 类型，并显式声明返回类型为 React.ReactElement。
export const SplitScreen = ({
Left,
Right,
}: SplitScreenProps): React.ReactElement => {
return (
<Container>
<Panel>
<Left />
</Panel>
<Panel>
<Right />
</Panel>
</Container>
);
};
src\App.tsx
import "./App.css";
import { SplitScreen } from "./components/split-screen";
const LeftSideComp = () => {
return <h2 style={{ backgroundColor: "red" }}>left</h2>;
};
const RightSideComp = () => {
return <h2 style={{ backgroundColor: "blue" }}>right</h2>;
};
function App() {
return <SplitScreen Left={LeftSideComp} Right={RightSideComp} />;
}
export default App;
4. 屏幕分割器增强 Screen Splitter Enhancement
src\components\split-screen.tsx
import React from 'react';
import { styled } from 'styled-components';
// 定义 styled-components 的类型
const Container = styled.div`
display: flex;
`;
interface PanelProps {
flex: number;
}
const Panel = styled.div<PanelProps>`
flex: ${(p) => p.flex};
`;
// 定义 SplitScreen 组件的 props 类型
interface SplitScreenProps {
children: [React.ReactNode, React.ReactNode];
leftWidth?: number;
rightWidth?: number;
}
export const SplitScreen = ({
children,
leftWidth = 1,
rightWidth = 1,
}: SplitScreenProps): React.ReactElement => {
const [left, right] = children;
return (
<Container>
<Panel flex={leftWidth}>{left}</Panel>
<Panel flex={rightWidth}>{right}</Panel>
</Container>
);
};src\App.tsx
import React from 'react';
import './App.css';
import { SplitScreen } from './components/split-screen';
interface SideCompProps {
title: string;
}
const LeftSideComp = ({ title }: SideCompProps): React.ReactElement => {
return <h2 style={{ backgroundColor: 'crimson' }}>{title}</h2>;
};
const RightSideComp = ({ title }: SideCompProps): React.ReactElement => {
return <h2 style={{ backgroundColor: 'burlywood' }}>{title}</h2>;
};
function App(): React.ReactElement {
return (
<SplitScreen leftWidth={1} rightWidth={3}>
<LeftSideComp title="Left" />
<RightSideComp title="Right" />
</SplitScreen>
);
}
export default App;5. 列表 Lists
src\components\authors\LargeListItems.tsximport React from 'react';
export interface Author { name: string; age: number; country: string; books: string[]; }
interface LargeAuthorListItemProps { author: Author; }
export const LargeAuthorListItem = ({ author }: LargeAuthorListItemProps): React.ReactElement => { const { name, age, country, books } = author; return ( <>
{name}
<p>Age: {age}</p>
<p>Country: {country}</p>
<h2>Books</h2>
<ul>
{books.map((book) => (
<li key={book}>{book}</li>
))}
</ul>
</>); };
>`src\components\authors\SmallListItems.tsx`
```tsx
// components/authors/SmallAuthorListItem.tsx
import React from 'react';
import { Author } from './LargeListItems';
interface SmallAuthorListItemProps {
author: Pick<Author, 'name' | 'age'>;
}
export const SmallAuthorListItem = ({ author }: SmallAuthorListItemProps): React.ReactElement => {
const { name, age } = author;
return (
<p>Name: {name}, Age: {age}</p>
);
};
src\components\lists\Regular.tsximport React from 'react';
interface RegularListProps
export const RegularList = <T,>({ items, sourceName, ItemComponent }: RegularListProps
>`src\data\authors.ts`
```tsx
export const authors = [
{
name: "Sarah Waters",
age: 55,
country: "United Kingdom",
books: ["Fingersmith", "The Night Watch"],
},
{
name: "Haruki Murakami",
age: 71,
country: "Japan",
books: ["Norwegian Wood", "Kafka on the Shore"],
},
{
name: "Chimamanda Ngozi Adichie",
age: 43,
country: "Nigeria",
books: ["Half of a Yellow Sun", "Americanah"],
},
];
src\App.tsximport { LargeAuthorListItem } from "./components/authors/LargeListItems"; import { SmallAuthorListItem } from "./components/authors/SmallListItems"; import { RegularList } from "./components/lists/Regular"; import { authors } from "./data/authors";
function App() { return ( <> <RegularList items={authors} sourceName={"author"} ItemComponent={SmallAuthorListItem} /> <RegularList items={authors} sourceName={"author"} ItemComponent={LargeAuthorListItem} /> </> ); }
export default App;
## 6. 列表类型 Lists Types
>`src\components\books\LargeListItems.tsx`
```tsx
import React from 'react';
export interface Book {
name: string;
price: number;
title: string;
pages: number;
}
interface LargeBookListItemProps {
book: Book;
}
export const LargeBookListItem = ({ book }: LargeBookListItemProps): React.ReactElement => {
const { name, price, title, pages } = book;
return (
<>
<h2>{name}</h2>
<p>{price}</p>
<h2>Title:</h2>
<p>{title}</p>
<p># of Pages: {pages}</p>
</>
);
};
src\components\books\SmallListItems.tsximport React from 'react'; import { Book } from './LargeListItems';
interface SmallBookListItemProps { book: Pick<Book, 'name' | 'price'>; }
export const SmallBookListItem = ({ book }: SmallBookListItemProps): React.ReactElement => { const { name, price } = book; return (
{name} / {price}
); };
>`src\components\lists\Numbered.tsx`
```tsx
import React from "react";
interface NumberedListProps<T> {
items: T[];
sourceName: string;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
ItemComponent: any; //React.ComponentType<{ [key: string]: T }>;
}
export const NumberedList = <T,>({
items,
sourceName,
ItemComponent,
}: NumberedListProps<T>): React.ReactElement => {
return (
<>
{items.map((item, i) => {
const props = { [sourceName]: item };
return (
<React.Fragment key={i}>
<h3>{i + 1}</h3>
<ItemComponent {...props} />
</React.Fragment>
);
})}
</>
);
};
src\App.tsximport { LargeAuthorListItem } from "./components/authors/LargeListItems"; import { SmallAuthorListItem } from "./components/authors/SmallListItems"; import { LargeBookListItem } from "./components/books/LargeListItems"; import { SmallBookListItem } from "./components/books/SmallListItems"; import { NumberedList } from "./components/lists/Numbered"; import { RegularList } from "./components/lists/Regular"; import { authors } from "./data/authors"; import { books } from "./data/books";
function App() { return ( <> <RegularList items={authors} sourceName={"author"} ItemComponent={SmallAuthorListItem} /> <NumberedList items={authors} sourceName={"author"} ItemComponent={LargeAuthorListItem} />
<RegularList
items={books}
sourceName={"book"}
ItemComponent={SmallBookListItem}
/>
<NumberedList
items={books}
sourceName={"book"}
ItemComponent={LargeBookListItem}
/>
</>); }
export default App;
## 7. 模态框 Modals
非受控，因为父级无法从模态框外部控制模态框的状态。
这个模型是非受控的，因为这个模型本身可以控制自己，比如显示和隐藏组件的 show 和 setShow。
我们说它是非受控的，因为外部组件无法直接访问它的特性。
因为我无法访问这个模型的状态，包括 show 和 setShow，这降低了模型的灵活性，因为它是非受控的。
>`src\components\Modal.tsx`
```tsx
import React, { useState, ReactNode } from 'react';
import { styled } from 'styled-components';
const ModalBackground = styled.div`
position: absolute;
left: 0;
top: 0;
overflow: auto;
background-color: #00000067;
width: 100%;
height: 100%;
`;
const ModalContent = styled.div`
margin: 12% auto;
padding: 24px;
background-color: wheat;
width: 50%;
`;
interface ModalProps {
children: ReactNode;
}
export const Modal = ({ children }: ModalProps): React.ReactElement => {
const [show, setShow] = useState<boolean>(false);
return (
<>
<button onClick={() => setShow(true)}>Show Modal</button>
{show && (
<ModalBackground onClick={() => setShow(false)}>
<ModalContent onClick={(e) => e.stopPropagation()}>
<button onClick={() => setShow(false)}>Hide Modal</button>
{children}
</ModalContent>
</ModalBackground>
)}
</>
);
};
src\App.tsximport { Modal } from "./components/Modal"; import { LargeBookListItem } from "./components/books/LargeListItems"; import { books } from "./data/books";
function App() { return ( <>
</>); }
export default App;
React进阶开发 设计系统, 设计模式, 性能优化Advanced React Design System, Design Patterns, Performance
初步完成进度：22。 调试完成段落：9。
目录 1. 介绍 2. 设计模式布局组件 3. 设计模式容器组件 4. 设计模式受控和非受控组件 5. 设计模式高阶组件 6. 设计模式自定义钩子 7. React中的函数式编程设计模式 8. 更多设计模式 9. 高级概念和钩子 10. 代码清理技巧 11. 可扩展项目架构 12. API层和异步操作 13. 使用React-Query的API层 14. 状态管理模式 15. 性能优化 16. 设计系统核心概念 17. 使用Figma构建组件的设计系统 18. 在React中开发组件的设计系统 19. 封装样式的设计系统 20. 间距模式的设计系统 21. 更复杂样式的设计系统模式 22. 设计系统最终项目 23. 高级Typescript介绍 24. 高级Typescript钩子类型 25. 高级Typescript类型Reducer 26. 高级Typescript Context API类型 27. 高级Typescript使用泛型 28. 高级Typescript更多内容 29. 高级Typescript组件模式 30. 额外 31. 附录 A - Typescript基础 32. 旧版- 性能优化