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;
};
},
4.菜单路由配置
router=》module=》pages.js
// 单位配置
{
path: "/vip/configure",
component: React.lazy(() => import("@/pages/vip/configure")),
permis: false,
},
其中:pages/vip/configure 指的是页面路径,默认访问index.jsx页面
5. componentdidmount用法
componentdidmount是React组件中生命周期函数的一种,该函数在组件加载后调用,通常被用来进行如下的操作:
获取数据
注册事件
设置定时器
操作DOM
参考:https://www.python100.com/html/106436.html
6.react样式的几种写法
(1)标签样式
<div style={{color:'red'}}>对接星空</div>
(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>
)
}
}
(3)外部引用(常用)
App.css
.App {
text-align: center;
}
js引用
import './App.css';
function App() {
return (
<div className="App">引用外部css</div>
);
}
export default App;
7.返回语句可以全写在一行上,可以不用小挂号
注意:没有括号包裹的话,任何在 return 下一行的代码都 将被忽略!
一行写法:
return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;
多行写法:
return (
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
);
8.组件可以渲染其他组件,但是 请不要嵌套他们的定义:
export default function Gallery() {
// 🔴 永远不要在组件中定义组件
function Profile() {
// ...
}
// ...
}
上面这段代码 非常慢,并且会导致 bug 产生。因此,你应该在顶层定义每个组件:
export default function Gallery() {
return (
<Profile/>
<Profile/>
<Profile/>
);
}
// ✅ 在顶层声明组件
function Profile() {
// ...
}
当子组件需要使用父组件的数据时,你需要 通过 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)
说明:
- 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());
// ...
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