React的基本用法

1.先创建项目 react脚手架

create-react-app project App

2.把项目内不需要的配置文件删除

3.配置路由 需要用到 react-router-dom 下包

4.进行路由的配置

import { HashRouter, Router, Routes, Navigate, Route } from 'react-router-dom';
import { lazy } from 'react';

// 定义路由配置数组，包含路径和对应组件的映射
let arr = [
    {
        path: '/',
        to: '/home',
    },
    {
        path: '/home',
        element: lazy(() => import('../view/Home/index')),
    },
    {
        path: '/yun',
        element: lazy(() => import('../view/Yun/index')),
    },
];

/**
 * 路由配置组件。
 * 使用HashRouter作为路由管理器，动态渲染Routes内的Route组件，根据不同的路径加载对应的组件。
 * 使用lazy加载技术延迟加载页面组件，提高应用的初始化速度。
 * 
 * @returns 返回HashRouter组件，内部包含根据路由配置动态生成的Route组件。
 */
const router = () => {
    return (
        <HashRouter>
            <Routes>
                {
                    arr.map((item, index) => {
                        // 根据路由配置动态生成Route组件，如果element存在则渲染组件，否则导航到to属性指定的路径
                        return (
                            <Route
                                key={index}
                                path={item.path}
                                element={
                                    item.element
                                    ? <item.element />
                                    : <Navigate to={item.to} />
                                }
                            />
                        );
                    })
                }
            </Routes>
        </HashRouter>
    );
};

export default router;

5.react-router-dom中的通过解构出来个个函数的意思

• HashRouter: React Router 中的一种路由器组件，用于基于 URL 的哈希（Hash）实现路由。
• Router: React Router 中的另一种路由器组件，支持更灵活的路由设置。
• Routes: React Router 中的组件，用于定义应用程序的路由映射。
• Navigate: React Router 中的一个组件或函数，用于在路由中进行编程式导航。
• Route: React Router 中的组件，用于定义特定路径下应该呈现哪个组件。

6.配置好的路由导入到index.js中

import React from 'react';
import ReactDOM from 'react-dom/client';
import '../src/assets/iconfont/iconfont.css';
import App from './App';

import Router from './router/routerConfig';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Router>
<App />
  </Router>
    

);

7.react中的useState 的作用

• useState 是 React 提供的一个 Hook，用于在函数组件中添加状态管理能力。
• 它可以帮助我们在函数组件中保存和更新状态数据。

• import React, { useState } from 'react';
  
  function Counter() {
    // 声明一个状态变量 count，初始值为 0
    const [count, setCount] = useState(0);
  
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );
  }
  

8.react中的useEffect 的作用 

• useEffect 是 React 提供的另一个 Hook，用于在函数组件中执行副作用操作（如数据获取、订阅、手动操作 DOM 等）。
• 副作用操作通常需要在组件渲染后执行，例如在组件挂载、更新时执行某些操作，或者在组件卸载时执行清理工作。

意义：

• 在函数组件中，由于没有生命周期方法，useEffect 提供了一种在组件每次渲染后执行副作用操作的机制，帮助我们处理数据获取、订阅管理、手动 DOM 操作等与状态无关的操作。

使用方法：

• useEffect 接收一个函数作为参数，这个函数就是副作用操作的具体实现。

• 可选地，可以在 useEffect 的第二个参数中传入一个数组，表示什么状态变化会触发 useEffect 的重新执行。如果省略第二个参数，则 useEffect 每次组件渲染都会执行。

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

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

  // 每次 count 更新后打印消息
  useEffect(() => {
    console.log(`You clicked ${count} times`);
  }, [count]); // 仅在 count 发生变化时执行

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 9.react中设置样式使用className来定义标签名称