react 使用笔记

1.学习

https://reactjs.bootcss.com/learn
https://react.docschina.org/learn/your-first-component

2.项目启动报错：Delete ␍ prettier/prettier

解决：https://blog.csdn.net/qq_30272167/article/details/133280165

3.访问地址配置

文件：config-overrides.js

devServer: function (configFunction) {
  return function (proxy, allowedHost) {
    const config = configFunction(proxy, allowedHost);
    config.proxy = {
      "/api": {
        // target: "http://10.30.1.12",//服务器
        target: "http://localhost:9999",//测试
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },
    };
    return config;
  };
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4.菜单路由配置

router=》module=》pages.js

// 单位配置
  {
    path: "/vip/configure",
    component: React.lazy(() => import("@/pages/vip/configure")),
    permis: false,
  },
1
2
3
4
5
6

其中：pages/vip/configure 指的是页面路径，默认访问index.jsx页面

5. componentdidmount用法

componentdidmount是React组件中生命周期函数的一种，该函数在组件加载后调用，通常被用来进行如下的操作：
获取数据
注册事件
设置定时器
操作DOM
参考：https://www.python100.com/html/106436.html

6.react样式的几种写法

（1）标签样式

{color:'red'}}>对接星空div>
1

（2）js内部声明样式

const shape={
    border:"1px solid black",
    width:200,
    margin:"auto"
}
class AntdUi extends Component {
    render(){
        const {data}=this.state;
        return (
            <div >
                <h1 style={shape}></h1>
            </div>
        )
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

（3）外部引用(常用)

App.css

.App {
  text-align: center;
}
1
2
3

js引用

import './App.css';

function App() {
  return (
    <div className="App">引用外部css</div>
  );
}
export default App;
1
2
3
4
5
6
7
8

7.返回语句可以全写在一行上，可以不用小挂号

注意：没有括号包裹的话，任何在 return 下一行的代码都 将被忽略！
一行写法：

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;
1

多行写法：

return (
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
);
1
2
3
4

8.组件可以渲染其他组件，但是 请不要嵌套他们的定义：

export default function Gallery() {
  // 🔴 永远不要在组件中定义组件
  function Profile() {
    // ...
  }
  // ...
}
1
2
3
4
5
6
7

上面这段代码 非常慢，并且会导致 bug 产生。因此，你应该在顶层定义每个组件：

export default function Gallery() {
	return (
		<Profile/>
		<Profile/>
		<Profile/>
	);
}
// ✅ 在顶层声明组件
function Profile() {
  // ...
}
1
2
3
4
5
6
7
8
9
10
11

当子组件需要使用父组件的数据时，你需要 通过 props 的形式进行传递，而不是嵌套定义。

9.万物皆组件

你的 React 应用程序从“根”组件开始。通常，它会在启动新项目时自动创建。例如，如果你使用 CodeSandbox，根组件定义在 src/App.js 中。如果使用 Next.js 框架，根组件定义在 pages/index.js 中。在这些示例中，一直有导出根组件。

大多数 React 应用程序只有组件。这意味着你不仅可以将组件用于可复用的部分，例如按钮，还可以用于较大块的部分，例如侧边栏、列表以及最终的完整页面！组件是组织 UI 代码和标签的一种快捷方式，即使其中一些组件只使用了一次。

像 Next.js 这样的框架会做更多事情。与使用一个空白的 HTML 页面并让 React 使用 JavaScript “接手”管理页面不同，框架还会根据你的 React 组件自动生成 HTML。这使你的应用程序在加载 JavaScript 代码之前能够展示一些内容。

尽管如此，许多网站仅使用 React 来 添加“交互性”。它们有很多根组件，而不是整个页面的单个组件。你可以根据需要尽可能多或尽可能少地使用 React。

10.useState-使用状态

useState是一个 React Hook，可让您向组件添加状态变量。
语法：

const [state, setState] = useState(initialState)
1

说明：

• useState(initialState)：useState在组件的顶层调用来声明状态变量。
• initialState：初始值
• state：变量名（任何类型）
• setState：函数，用来改变原来的数据

使用示例

import { useState } from 'react';

function MyComponent() {
  const [age, setAge] = useState(28);
  const [name, setName] = useState('Taylor');
  const [todos, setTodos] = useState(() => createTodos());
  // ...
1
2
3
4
5
6
7

import React,{useState} from 'react'
// 导入useState函数 ->react
// 执行函数并传参，必须在函数组件中
// [数据，修改数据方法]
// 使用数据，修改数据
function App1(params) {
    // useState(默认值)
    const [count,setCount] = useState(0)
    const [flag,setFlag] = useState(true)
    const [list,setList] = useState([])
    const [name,setName] = useState("张三")
    function test(){
        setCount(count+1)
        setFlag(false)
        setList([1,2,3,4])
        setName("李四")
    }
    return (
        <div>
            {flag ? '1':'0'}
            {list.join("-")}
            {name}
            <button type="" onClick={test}>{count}</button>
        </div>
    )
}
export default App1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

参考：https://react.dev/reference/react/useState#usestate