2024 年，你应该知道的 5 种 React 设计模式

import React, { ButtonHTMLAttributes } from 'react';

// 按钮组件的形态：实心或者空心type ButtonVariant = 'filled' | 'outlined';

export type ButtonProps = {  /**   * the variant of the button to use    * @default 'outlined'   */  variant?: ButtonVariant;} & ButtonHTMLAttributes<HTMLButtonElement>;;

const ButtonStyles: { [key in ButtonVariant]: React.CSSProperties } = {  filled: {    backgroundColor: 'blue', // Change this to your filled button color    color: 'white',  },  outlined: {    border: '2px solid blue', // Change this to your outlined button color    backgroundColor: 'transparent',    color: 'blue',  },};

export function Button({ variant = 'outlined', children, style, ...rest }: ButtonProps) {  return (    <button      type='button'      style={{        ...ButtonStyles[variant],        padding: '10px 20px',        borderRadius: '5px',        cursor: 'pointer',        ...style      }} {...rest}>      {children}    </button>  );}

// 这里引入了，基础按钮组件和其propsimport { Button, ButtonProps } from '@lakinduhewa/react-design-patterns.base.button';import React from 'react';

export type DeleteButtonProps = {} & ButtonProps;

export function DeleteButton({ ...rest }: DeleteButtonProps) {  return (    <Button      variant='filled'      style={{        background: 'red',        color: 'white'      }}      {...rest}    >      DELETE    </Button>  );}

import React, { useState, useEffect } from 'react';import axios from 'axios';const BlogList = () => {    const [blogs, setBlogs] = useState([]);    const [isLoading, setIsLoading] = useState(true);    const [error, setError] = useState(null);    useEffect(() => {        axios.get('https://api.example.com/blogs')            .then(response => {                setBlogs(response.data);                setIsLoading(false);            })            .catch(error => {                setError(error);                setIsLoading(false);            });    }, []);    if (isLoading) return <div>Loading...</div>;    if (error) return <div>Error: {error.message}</div>;    return (        <div>            <h2>Blog List</h2>            <ul>                {blogs.map(blog => (                    <li key={blog.id}>{blog.title}</li>                ))}            </ul>        </div>    );};export default BlogList;

import { useEffect, useState } from 'react';import { Blog } from './blog.type';import { Blogs } from './blog.mock';

export function useBlog() {  const [blogs, setBlogs] = useState<Blog[]>([]);  const [loading, setLoading] = useState<boolean>(false);

  useEffect(() => {    setLoading(true);     // 注意：这里的setTimeout非实际需要，只是为了模拟API调用    setTimeout(() => {      setBlogs(Blogs);      setLoading(false);    }, 3000);  }, []);

  return { blogs, loading }}

import React from 'react';// 引入上面封装的 useBlog hookimport { useBlog } from '@lakinduhewa/react-design-patterns.hooks.use-blog';export function BlogList() {  const { blogs, loading } = useBlog();  if (loading) {    return (      <p>We are loading the blogs...</p>    )  }  return (    <ul>      {blogs.map((blog) => <ol        key={blog.id}      >        {blog.title}      </ol>)}    </ul>  );}

import { useContext, createContext } from 'react';export type SampleContextContextType = {  /**   * primary color of theme.   */  color?: string;};export const SampleContextContext = createContext<SampleContextContextType>({  color: 'aqua'});export const useSampleContext = () => useContext(SampleContextContext);

import React, { ReactNode } from 'react';import { SampleContextContext } from './sample-context-context';export type SampleContextProviderProps = {  /**   * primary color of theme.   */  color?: string,  /**   * children to be rendered within this theme.   */  children: ReactNode};export function SampleContextProvider({ color, children }: SampleContextProviderProps) {  return <SampleContextContext.Provider value={{ color }}>{children}</SampleContextContext.Provider>}

// ComponentA.jsconst ComponentA = () => {    return <div>This is Component A</div>;};// ComponentB.jsconst ComponentB = () => {    return <div>This is Component B</div>;};// ConditionalComponent.jsimport React, { useState } from 'react';import ComponentA from './ComponentA';import ComponentB from './ComponentB';const ConditionalComponent = () => {    const [toggle, setToggle] = useState(true);    return (        <div>            <button onClick={() => setToggle(!toggle)}>Toggle Component</button>            {toggle ? <ComponentA /> : <ComponentB />}        </div>    );};export default ConditionalComponent;

import React, { ReactNode } from 'react';export type ConditionalProps = {  /**   * the condition to test against   */  condition: boolean  /**   * the component to render when condition is true   */  whenTrue: ReactNode  /**   * the component to render when condition is false   */  whenFalse: ReactNode};export function Conditional({ condition, whenFalse, whenTrue }: ConditionalProps) {  return condition ? whenTrue : whenFalse;}

export const ConditionalTrue = () => {  return (    <Conditional      condition      whenFalse="You're False"      whenTrue="You're True"    />  );}export const ConditionalFalse = () => {  return (    <Conditional      condition={false}      whenFalse="You're False"      whenTrue="You're True"    />  );}