会切换其状态，从而改变文字和背景颜色。

3. 优缺点

优点

• 简单直接：可以快速应用样式，尤其是动态样式时。
• 无类名冲突：因为样式是局部的，不会受到其他样式的影响。

缺点

• 不可复用：无法将样式应用于多个组件，难以维护。
• 性能问题：每次渲染都会创建新的对象，可能会影响性能，特别是在频繁更新的组件中。
• 不支持伪类和媒体查询：无法使用 CSS 的伪类（如 :hover）和媒体查询，限制了样式的灵活性。

3、Componets 写法

1. React 组件的基本概念

React 组件是构成 React 应用的基本单元。它们可以是类组件或函数组件。类组件使用 ES6 类来定义，而函数组件则是简单的 JavaScript 函数。

1.1 类组件

类组件通常用于需要管理状态或使用生命周期方法的场景。

import React, { Component } from 'react';

class MyComponent extends Component {
    // 构造函数用于初始化 state
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }
    // 上面 constructor 这块的代码可以只写 state {count : 0}, 
    // 在类组件中，可以直接在类的主体中定义 state，而不必在构造函数中初始化。
    // 这种语法会自动将 state 绑定到实例上，因此不需要显式调用 super(props)。

    // 增加 count 的方法
    increment = () => {
        this.setState({ count: this.state.count + 1 });
    };

    render() {
        return (
            

                
{this.state.count}
                增加
            
        );
    }
}

export default MyComponent;

1.2 函数组件

函数组件是无状态的，可以使用 React Hooks 来管理状态和副作用。

import React, { useState } from 'react';

const MyComponent = () => {
    const [count, setCount] = useState(0); // useState Hook

    const increment = () => {
        setCount(count + 1);
    };

    return (
        

            
{count}
            增加
        
    );
};

export default MyComponent;

2. State 的管理

state 是组件的本地状态，用于存储组件的动态数据。当状态改变时，React 会自动重新渲染组件。

2.1 设置初始状态

在类组件中，初始状态通常在构造函数中定义；在函数组件中，可以使用 useState Hook。

2.2 修改状态

使用 this.setState（类组件）或状态更新函数（函数组件）来更新状态。重要的是，状态更新是异步的。

// 类组件
this.setState({ key: value });

// 函数组件
setCount(newCount);

3. 遍历生成元素

在状态中存储一个数组，然后通过 .map() 方法遍历生成多个元素。

3.1 类组件示例

class ListComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            items: ['苹果', '香蕉', '橙子']
        };
    }

    render() {
        return (
            

                {this.state.items.map((item, index) => (
                    
{item}
                ))}
            
        );
    }
}

3.2 函数组件示例

const ListComponent = () => {
    const [items, setItems] = useState(['苹果', '香蕉', '橙子']);

    return (
        

            {items.map((item, index) => (
                
{item}
            ))}
        
    );
};

4. 函数传参

4.1 传递参数 e

class MyComponent extends Component {
  handleClick = (e) => {
    console.log(e.target);
  };

  render() {
    return (
      	// 传递参数 e
        Click me
      
    );
  }
}

4.2 传递自定义参数

class MyComponent extends Component {
  handleClick = (param) => {
    console.log('Button clicked!', param);
  };

  render() {
    return (
       this.handleClick('Hello')}>	// 传递自定义参数
        Click me
      
    );
  }
}

4.3 传递参数 e 和 自定义参数

class MyComponent extends Component {
  handleClick = (param, e) => {
    console.log('Button clicked!', param);
  };

  render() {
    return (
       this.handleClick('Hello', e)}>	// 传递参数
        Click me
      
    );
  }
}

5. 添加、删除和更新状态

可以通过按钮或其他交互方式来添加、删除或更新状态中的元素。

5.1 添加元素

// 在类组件中
addItem = () => {
    this.setState(prevState => ({
        items: [...prevState.items, '新水果']
    }));
};

// 在函数组件中
const addItem = () => {
    setItems([...items, '新水果']);
};

5.2 删除元素

// 在类组件中
removeItem = index => {
    this.setState(prevState => ({
        items: prevState.items.filter((_, i) => i !== index)
    }));
};

// 在函数组件中
const removeItem = index => {
    setItems(items.filter((_, i) => i !== index));
};

6. 受控表单绑定

import React, { useState } from 'react';

function ControlledForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Name: ${name}, Email: ${email}`);
  };

  return (
    

      

        
          Name:
           setName(e.target.value)}		// name 绑定上target.value
          />
        
      
      

        
          Email:
           setEmail(e.target.value)}
          />
        
      
      Submit
    
  );
}

export default ControlledForm;

7. 获取dom元素

1. 函数组件

可以通过 useRef 创建 refs：

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);	

  const handleFocus = () => {
    inputRef.current.focus(); // 获取到的 DOM 元素调用 focus 方法
  };

  return (
    

      
      Focus the input
    
  );
}

export default FocusInput;

• useRef: 创建一个 ref，用于存储对 DOM 元素的引用。
• ref 属性: 将 ref 赋值给要获取的元素，例如 。
• 访问 DOM 元素: 通过 inputRef.current 来访问 DOM 元素。

2. 类组件

可以通过 React.createRef() 创建 refs：

import React, { Component } from 'react';

class FocusInput extends Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  handleFocus = () => {
    this.inputRef.current.focus();
  };

  render() {
    return (
      

        
        Focus the input
      
    );
  }
}

export default FocusInput;

4、组件之间传递数据

子组件接收到的 props 是不可变的。如果需要修改 props 中的数据，应该通过父组件来管理状态并传递更新的值。

1 - 4 都是 父传子， 5 是 子传父

1. 传递常见数据类型（类组件写法）

在父组件的 state 中存储基本数据类型，并通过 props 传递给子组件。

父组件

import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  state = {
  	// 基本数据类型
    message: 'Hello from Parent!',
    numberValue: 42,
    boolValue: true,
    
    user: {	// 对象
      name: 'Alice',
      age: 30,
    },
    
  };

  handleAlert = () => {	// 方法
    alert('Hello from Parent!');
  };

  updateBoolValue = () => {
    this.setState(prevState => ({ boolValue: !prevState.boolValue }));
  };

  render() {
    return (
      

        
Parent Component
        
        Toggle Boolean
      
    );
  }
}

export default ParentComponent;

子组件

import React, { Component } from 'react';

class ChildComponent extends Component {
  render() {
    return (
      

        
Child Component
        
{this.props.message}
        
Number: {this.props.number}
        
Boolean: {this.props.isTrue ? 'True' : 'False'}
        
        	// 对象
      
    );
  }
}

export default ChildComponent;

2. 传递常见数据类型（函数组件写法）

父组件

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [message] = useState('Hello from Parent!');
  const [numberValue] = useState(42);
  const [boolValue, setBoolValue] = useState(true);
  const [user] = useState({
    name: 'Alice',
    age: 30,
  });

  const handleAlert = () => {
    alert('Hello from Parent!');
  };

  const updateBoolValue = () => {
    setBoolValue(prev => !prev);
  };

  return (
    

      
Parent Component
      
      Toggle Boolean
    
  );
};

export default ParentComponent;

子组件

import React from 'react';

const ChildComponent = ({ message, number, isTrue, user }) => {
  return (
    

      
Child Component
      
{message}
      
Number: {number}
      
Boolean: {isTrue ? 'True' : 'False'}
      
User: {user.name}, Age: {user.age}
 {/* 对象 */}
    
  );
};

export default ChildComponent;

说明

• 使用 useState 来管理状态。
• 通过解构 props 直接在函数参数中获取需要的值。
• 保持功能和逻辑不变，实现了相同的父子组件传值。

3. 传递多个 HTML 结构（类组件）

父组件将多个 JSX 元素传递给子组件，通过 props.children 访问这些元素。

import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  render() {
    return (
      

        
Parent Component
        	//  把 html 写在组件子组件当中
          
This is the first custom content!
          
This is the second custom content!
          
This is a header as custom content!
        
      
    );
  }
}

export default ParentComponent;

子组件

在子组件中，我们可以通过 React.Children.map 或者 this.props.children 分别处理传递过来的多个元素。

import React, { Component } from 'react';

class ChildComponent extends Component {
  render() {
    return (
      

        
Child Component
	// children数组中包含了父组件传递的 html
        {React.Children.map(this.props.children, (child, index) => (
          
{child}
        ))}
      
    );
  }
}

export default ChildComponent;

4. 传递多个 HTML 结构（函数组件）

父组件

import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  return (
    

      
Parent Component
      
        
This is the first custom content!
        
This is the second custom content!
        
This is a header as custom content!
      
    
  );
};

export default ParentComponent;

子组件

import React from 'react';

const ChildComponent = ({ children }) => {
  return (
    

      
Child Component
      {React.Children.map(children, (child, index) => (
        
{child}
      ))}
    
  );
};

export default ChildComponent;

说明

• 父组件: 使用函数组件，并将多个 JSX 元素作为子组件的内容传递。
• 子组件: 通过解构 props 获取 children，并使用 React.Children.map 迭代处理每个子元素。

5. 子传父

父组件

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [dataFromChild, setDataFromChild] = useState('');

  const handleDataChange = (data) => {
    setDataFromChild(data);
  };

  return (
    

      
Parent Component
      
Data from Child: {dataFromChild}
      
    
  );
};

export default ParentComponent;

子组件

import React from 'react';

const ChildComponent = ({ onDataChange }) => {
  const sendDataToParent = () => {
    const data = 'Hello from Child!';
    onDataChange(data); // 调用父组件传来的函数
  };

  return (
    

      
Child Component
      Send Data to Parent
    
  );
};

export default ChildComponent;

说明

1. 父组件: ParentComponent 使用 useState 来存储从子组件接收到的数据，并定义一个 handleDataChange 函数来更新状态。
2. 子组件: ChildComponent 接收 onDataChange 函数作为 prop，点击按钮时调用该函数将数据发送给父组件。

5、生命周期

• 挂载阶段：

  • constructor()
  • render()
  • componentDidMount()

• 更新阶段：

  • getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • componentDidUpdate()

• 卸载阶段：

  • componentWillUnmount()

1. 挂载（Mount）

当组件被创建并插入到 DOM 中时，进入挂载阶段。执行顺序如下：

1. constructor()：构造函数用于初始化状态和绑定方法。
2. render()：返回要渲染的 JSX，决定组件的结构。
3. componentDidMount()：组件挂载后调用，适合进行 API 请求或添加事件监听。

2. 更新（Update）

当组件的状态或属性发生变化时，组件会重新渲染，进入更新阶段。执行顺序如下：

1. render()：重新渲染组件。
2. getDerivedStateFromProps(nextProps, prevState)：在渲染前调用，可以根据新 props 更新 state。
3. shouldComponentUpdate(nextProps, nextState)：用于控制组件是否重新渲染，返回 true 或 false。
4. componentDidUpdate(prevProps, prevState)：组件更新后调用，可以根据上一个状态或属性执行副作用。

3. 卸载（Unmount）

当组件从 DOM 中移除时，进入卸载阶段。执行顺序如下：

1. componentWillUnmount()：组件卸载前调用，适合清理资源（如取消网络请求或移除事件监听）。

4. 使用 Hook 的方式

在函数组件中，可以使用 Hook 来实现类似的生命周期效果：

• useEffect：相当于 componentDidMount 和 componentDidUpdate，可以用于处理副作用。

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

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

  useEffect(() => {
    // 组件挂载时执行
    console.log('Component mounted');

    // 组件更新时执行
    return () => {
      // 组件卸载时清理
      console.log('Component unmounted');
    };
  }, [count]); // 依赖数组，count 变化时执行

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
    
  );
};

6、 路由

1. 基础概念

路由（Routing）：在单页应用（SPA）中，路由用于管理不同视图或页面之间的导航。当用户点击链接或按钮时，路由会拦截这些操作，并根据 URL 的变化加载相应的组件，而不需要重新加载整个页面。

React Router：这是最流行的 React 路由库，它提供了灵活的路由功能。React Router 通过组件化的方式来定义和管理路由。

2. 常用组件

React Router 提供了几个核心组件，下面是一些常用的组件及其用途：

• BrowserRouter：这个组件提供了基于 HTML5 的历史记录的路由。它通常包裹在应用的根组件外部。

  import { BrowserRouter } from 'react-router-dom';
  
  function App() {
    return (
      
        {/* 其他组件 */}
      
    );
  }
  

• Route：用于定义路由的组件。它接受 path 属性来指定匹配的 URL，以及 element 属性来指定渲染的组件。

  import { Route } from 'react-router-dom';
  
  } />
  

• Routes：用来包裹多个 Route 组件，确保只有一个匹配的路由被渲染。

  import { Routes } from 'react-router-dom';
  
  
    } />
    } />
  
  

• Link：用于在应用中创建导航链接的组件。它类似于 HTML 的 标签，但使用的是客户端路由。

  import { Link } from 'react-router-dom';
  
  About
  

• Navigate：用于在组件中进行重定向。

  import { Navigate } from 'react-router-dom';
  
  
  

3. 路由配置

配置路由通常涉及创建一个路由表，定义各个路由及其对应的组件。以下是一个简单的示例，展示如何在 React 应用中配置路由。

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

// 导入页面组件
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

function App() {
  return (
    
      
      
        } />
        } />
        {/* 404 页面 */}
        } />
      
    
  );
}

export default App;

4. 嵌套路由 及 路由守卫、404

嵌套路由允许你在某个父路由的组件内部定义子路由。这样，你可以在父路由的页面中渲染子路由对应的内容。

import { Routes, Route, Link } from 'react-router-dom';

function Users() {
  return (
    

      
Users
      User 1
      User 2
      
        } />
      
    
  );
}

function UserProfile() {
  const { userId } = useParams();
  return 
User Profile for User ID: {userId}
;
}

路由守卫

路由保护可以确保只有特定条件下（例如用户登录后）才能访问某些路由。可以通过创建一个高阶组件（HOC）来实现。

function ProtectedRoute({ element, isAuthenticated }) {
  return isAuthenticated ? element : ;
}

// 使用

  } isAuthenticated={isLoggedIn} />} />

404 页面处理

可以使用通配符路由 * 来处理未匹配的路径，并显示 404 页面。

} />

5. 动态路由（match）

动态路由允许你在路径中使用参数，这样可以在 URL 中捕获动态值。例如，展示用户信息的页面。

} />

类组件中

使用 URL 参数，可以使用 withRouter 高阶组件来获取路由的 props，包括 match、location 和 history 对象。

使用 withRouter 获取 URL 参数

import React from 'react';
import { withRouter } from 'react-router-dom';

class UserProfile extends React.Component {
  render() {
    // 从 props 中获取 match 对象
    const { match } = this.props;
    const userId = match.params.userId; // 获取 URL 参数

    return 
User ID: {userId}
;
  }
}

// 使用 withRouter 将 UserProfile 包装起来
export default withRouter(UserProfile);

关键点

• withRouter 是一个高阶组件，它将路由的相关信息作为 props 传递给被包装的组件。
• match.params 中包含了 URL 中的动态参数，像这里的 userId。

确保在路由配置中使用 UserProfile 组件时，像这样设置路由：

} />

函数组件

直接使用 useParams 来获取 URL 参数：

import { useParams } from 'react-router-dom';

function UserProfile() {
  const { userId } = useParams();
  return 
User ID: {userId}
;
}

6. 获取 修改 查询字符串（location）

https://example.com/users?userId=123&userName=Alice

1. 类组件获取查询字符串参数

在类组件中，我们通常使用 withRouter 高阶组件来访问路由相关的信息，包括查询字符串。

示例代码

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class QueryParamsClassComponent extends Component {
  render() {
    const { location } = this.props; // 从 props 中获取 location 对象
    const searchParams = new URLSearchParams(location.search); // 创建 URLSearchParams 对象

    // 获取具体的参数
    const userId = searchParams.get('userId'); // 获取 userId 参数
    const name = searchParams.get('name'); // 获取 name 参数
    // searchParams。set('userId', '456'); // 修改或添加 userId 参数
    // searchParams.set('name', 'Alice'); // 修改或添加 name 参数

    return (
      

        
Query Parameters
        
User ID: {userId}
        
Name: {name}
      
    );
  }
}

export default withRouter(QueryParamsClassComponent); // 使用 withRouter 包裹类组件

代码解析

1. 引入 withRouter：首先需要引入 withRouter，它使得组件可以访问路由的 props。
2. 访问 location 对象：在 render 方法中，从 this.props 中获取 location 对象。
3. 使用 URLSearchParams：
   • new URLSearchParams(location.search) 创建一个 URLSearchParams 对象，location.search 包含查询字符串（包括 ?）。
   • 通过 get 方法提取具体的参数值，例如 userId 和 name。
4. 渲染参数：在组件的 JSX 中渲染这些参数。

2. 函数组件获取查询字符串参数

在函数组件中，我们可以使用 useLocation Hook 来获取路由信息，包括查询字符串。

示例代码

import React from 'react';
import { useLocation } from 'react-router-dom';

const QueryParamsFunctionComponent = () => {
  const location = useLocation(); // 使用 useLocation 获取 location 对象
  const searchParams = new URLSearchParams(location.search); // 创建 URLSearchParams 对象

  // 获取具体的参数
  const userId = searchParams.get('userId'); // 获取 userId 参数
  const name = searchParams.get('name'); // 获取 name 参数
  //searchParams.get('userId'); // 获取 userId 参数
  //searchParams.get('name'); // 获取 name 参数

  return (
    

      
Query Parameters
      
User ID: {userId}
      
Name: {name}
    
  );
};

export default QueryParamsFunctionComponent; // 直接导出函数组件

代码解析

1. 引入 useLocation：引入 useLocation Hook。
2. 调用 useLocation：在函数组件中调用 useLocation()，它返回当前路由的 location 对象。
3. 使用 URLSearchParams：
   • new URLSearchParams(location.search) 创建一个 URLSearchParams 对象，用于解析查询字符串。
   • 使用 get 方法提取需要的参数值。
4. 渲染参数：在组件的 JSX 中渲染这些参数。

7、编程导航 history

1. history 对象的概念

• 历史记录：history 对象是一个 JavaScript 对象，它表示浏览器的会话历史。每当用户访问一个新的 URL 时，浏览器会将该 URL 添加到历史记录中。
• 导航：通过 history 对象，你可以编程式地导航到不同的页面，而不是仅仅依赖于用户点击链接。

2. history 对象的常用方法

history 对象提供了多种方法来处理导航和历史记录。以下是一些常用的方法：

push(path, [state])

• 功能：在历史记录栈中添加一个新的条目，导航到指定的路径。
• 参数：
  • path：要导航到的路径。
  • state（可选）：与新路径关联的状态对象，这个对象可以在目标页面通过 location.state 访问。

示例：

this.props.history.push('/home'); // 导航到 /home
this.props.history.push('/profile', { from: 'home' }); // 导航到 /profile，并传递状态

replace(path, [state])

• 功能：替换当前的历史记录条目，导航到指定的路径，而不是添加一个新的条目。
• 参数：同 push 方法。

示例：

this.props.history.replace('/login'); // 用 /login 替换当前的历史条目

go(n)

• 功能：根据历史记录栈中的位置导航。
• 参数：
  • n：要导航的相对位置（正数表示向前，负数表示向后）。

示例：

this.props.history.go(-1); // 返回到上一页
this.props.history.go(2); // 前进两页

goBack() 返回到上一页，等同于 go(-1)。

goForward() 前进到下一页，等同于 go(1)。

3. 在 React Router 中使用 history

在 React Router 中，history 对象通常是通过 withRouter 高阶组件或在函数组件中通过 useNavigate 和 useLocation Hook 访问的。

类组件使用 withRouter

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class MyComponent extends Component {
  handleNavigation = () => {
    this.props.history.push('/home'); // 使用 history 导航
  };

  render() {
    return Go to Home;
  }
}

export default withRouter(MyComponent); // 使用 withRouter 包裹组件

函数组件使用 useNavigate

在 React Router v6 及以上版本中，推荐使用 useNavigate Hook 来获取 navigate 函数。

import React from 'react';
import { useNavigate } from 'react-router-dom';

const MyFunctionComponent = () => {
  const navigate = useNavigate();

  const handleNavigation = () => {
    navigate('/home'); // 使用 navigate 导航
  };

  return Go to Home;
};

export default MyFunctionComponent;

8、子组件的路由 Outlet

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import UserProfile from './UserProfile';
import UserSettings from './UserSettings';
import UserActivity from './UserActivity';

const App = () => {
  return (
    
      
        }>
          } />
          } />
        
      
    
  );
};

export default App;

// UserProfile.js
import React from 'react';
import { Link, Outlet } from 'react-router-dom';

const UserProfile = () => {
  return (
    

      
User Profile
      
       {/* 渲染匹配的子路由 */}		// 路由
    
  );
};

export default UserProfile;

// UserSettings.js
import React from 'react';

const UserSettings = () => {
  return 
User Settings
;
};

export default UserSettings;

// UserActivity.js
import React from 'react';

const UserActivity = () => {
  return 
User Activity
;
};

export default UserActivity;

7、redux 集中状态管理

Redux.createStore 是 Redux 的传统方式，用于创建 Redux store。

Redux.createStore

1. 导入 Redux:

import { createStore } from 'redux';

2. 定义初始状态:

const initialState = {
  todos: [],
};

3. 创建 Reducer:

Reducer 是一个纯函数，接受当前状态和 action，并返回新的状态。

const todoReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return { ...state, todos: [...state.todos, action.payload] };
    default:
      return state;
  }
};

4. 创建 Store:

使用 createStore 创建 store，并传入 reducer。

const store = createStore(todoReducer);

5. 使用 Store:

可以使用 store.getState() 获取当前状态，使用 store.dispatch(action) 发送 action。

store.dispatch({ type: 'ADD_TODO', payload: { text: 'Learn Redux' } });
console.log(store.getState());

Redux Toolkit

Redux Toolkit 是官方推荐的 Redux 工具集，它简化了 Redux 的使用，包含了一些开箱即用的工具和最佳实践。使用 Redux Toolkit 可以更容易地管理状态，减少模板代码。

1. 安装

首先，安装 Redux Toolkit 和 React-Redux：

npm install @reduxjs/toolkit react-redux

2. 创建 Slice

使用 createSlice 来定义 state、reducers 和 actions。这样可以简化代码结构。

import { createSlice } from '@reduxjs/toolkit';

const todosSlice = createSlice({
  name: 'todos',
  initialState: [], // 要存的state

  // 使用 createSlice 创建 slice 时，定义的 reducer 函数会自动生成对应的 action creators。
  reducers: {
    addTodo: (state, action) => {	// state中包含所有 initialState 中的数据, 
      state.push(action.payload); // 使用 Immer 库来处理不可变状态
    },
    removeTodo: (state, action) => {
      return state.filter(todo => todo.id !== action.payload);	// payload 包含了调用时传递的参数, 可以是对象
    },
  },
});

// 导出 action
export const { addTodo, removeTodo } = todosSlice.actions;

// 导出 reducer
export default todosSlice.reducer;

3. 配置 Store

使用 configureStore 来创建 store，它会自动添加 Redux DevTools 支持和中间件。

import { configureStore } from '@reduxjs/toolkit';
import todosReducer from './todosSlice';

const store = configureStore({
  reducer: {
    todos: todosReducer,
  },
});

export default store;

4. 连接 React 和 Redux

在应用中使用 Provider 将 store 传递给组件树。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

5. 使用 Redux State

在组件中使用 useSelector 和 useDispatch 来访问状态和发起 action。

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addTodo, removeTodo } from './todosSlice';

const TodoList = () => {
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();

  const handleAddTodo = () => {
    const text = prompt('Enter todo:');
    const id = Date.now(); // 简单生成 ID
    dispatch(addTodo({ id, text }));
  };

  const handleRemoveTodo = (id) => {
    dispatch(removeTodo(id));
  };

  return (
    

      
Todo List
      

        {todos.map(todo => (
          

            {todo.text}
             handleRemoveTodo(todo.id)}>Remove
          
        ))}
      
      Add Todo
    
  );
};

export default TodoList;

6. 处理异步操作

使用 createAsyncThunk 处理异步请求。

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// 异步操作示例
export const fetchTodos = createAsyncThunk('todos/fetchTodos', async () => {
  const response = await fetch('/api/todos');
  return response.json();
});

const todosSlice = createSlice({
  name: 'todos',
  initialState: { items: [], status: 'idle' },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchTodos.fulfilled, (state, action) => {
        state.items = action.payload;
      });
  },
});

// 导出 reducer
export default todosSlice.reducer;

8、hook

好的，我们来详细讲解一下 React Hooks，包括基本用法、常见的 Hooks 和具体的应用场景。

1、基本用法

React Hooks 是 React 16.8 引入的一种新特性，旨在让函数组件具备类组件的功能，尤其是状态管理和副作用处理。Hooks 的引入使得函数组件更加强大和灵活。

1. 使用 Hooks 的规则

• 只能在函数组件或自定义 Hooks 中调用。 不可以在 普通 JavaScript 函数、类组件 或者 条件语句 中调用。
• 调用顺序必须一致。 React 会根据调用的顺序来追踪每个 Hook 的状态。

2、常见的 Hooks

1. useState

用于在函数组件中添加状态。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // count 是状态，setCount 是更新状态的函数

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
    
  );
}

2. useEffect

useEffect(()=> {}, 依赖项)

用于处理副作用，例如数据获取、订阅等。

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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));

    // 可选的清理函数
    return () => {
      // 例如取消订阅
    };
  }, []); // 依赖数组，空数组意味着仅在组件挂载时执行一次

  return 
{data ? JSON.stringify(data) : 'Loading...'}
;
}

3. useContext

用于在组件之间共享状态，避免逐层传递 props。

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

const ThemeContext = createContext('light');

function ThemedComponent() {
  const theme = useContext(ThemeContext);

  return 
Current theme: {theme}
;
}

function App() {
  return (
    
      
    
  );
}

4. useReducer

用于在复杂状态逻辑中管理状态，相比 useState 更加灵活。

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    

      Count: {state.count}
       dispatch({ type: 'increment' })}>+
       dispatch({ type: 'decrement' })}>-
    
  );
}

5. 自定义 Hooks

你可以创建自己的 Hooks，复用逻辑。

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(setData)
      .catch(setError);
  }, [url]);

  return { data, error };
}

// 使用自定义 Hook
function DataFetcher({ url }) {
  const { data, error } = useFetch(url);

  if (error) return 
Error: {error.message}
;
  return 
{data ? JSON.stringify(data) : 'Loading...'}
;
}

3、具体的应用场景

1. 数据获取: 使用 useEffect 和 useState 来从 API 获取数据。
2. 表单管理: 使用 useState 来管理输入框的状态，并处理提交。
3. 动画: 使用 useEffect 来设置动画的入场和离场。
4. 订阅: 在 useEffect 中添加订阅，返回一个清理函数以取消订阅。
5. 组合逻辑: 使用自定义 Hooks 来提取组件之间共享的逻辑。