推荐一个新发现的电子书阅读器——Koodo Reader
https://github.com/koodo-reader/koodo-reader
React中使用ajax
安装jquery
npm i jquery
使用
引入
import $ from 'jquery';
GET方法:
$.ajax({
url: url,
type: "GET",
data: {
},
dataType: "json",
success: function (resp) {
},
});
POST方法:
$.ajax({
url: url,
type: "POST",
data: {
},
dataType: "json",
success: function (resp) {
},
});
React中使用路由
安装
安装Route
组件:
npm i react-router-dom
Route组件介绍
BrowserRouter
:所有需要路由的组件,都要包裹在BrowserRouter
组件内Link
:跳转到某个链接,to
属性表示跳转到的链接Routes
:类似于C++中的switch
,匹配第一个路径Route
:路由,path
属性表示路径,element
属性表示路由到的内容useParams
和useSearchParams
获取路径参数Navigate
:和Route
组件组合使用来实现重定向
使用
BrowserRouter
引入
import { BrowserRouter } from 'react-router-dom';
使用BrowserRouter
在root.render()中用<BrowserRouter></BrowserRouter>
将App组件(或者自己定义的其他有使用路由的组件)括起来。
例如
<BrowserRouter>
<App />
</BrowserRouter>
Link
引入
import { Link } from 'react-router-dom';
使用
将页面内部跳转所用到的<a href="..."></a>
改为 <Link to="..."></Link>
,其他保持不变
Routes和Route
引入
import {Routes, Route} from 'react-router-dom';
使用
先写一个<Routes></Routes>
标签,然后在里面写<Route />
标签
其中<Route />
标签中有两个参数一个是path
另外一个是element
,path中放匹配的路径,element中放要渲染的标签
例如
<Routes>
<Route path='/' element={<Home />}/>
<Route path='like' element={<Like />}/>
<Route path='about' element={<About />}/>
<Route path='issues' element={<Issues />}/>
</Routes>
element中不仅可以放组件的标签,正常的html标签也可以放
例如:
<Routes>
<Route path='/' element={<h1>Hello world</h1>}/>
</Routes>
嵌套路由
<Route path="/web" element={<Web />}>
<Route index path="a" element={<h1>a</h1>} />
<Route index path="b" element={<h1>b</h1>} />
<Route index path="c" element={<h1>c</h1>} />
</Route>
注意:需要在父组件中添加<Outlet />
组件,用来填充子组件的内容。(即<Outlet />
会根据路由的不同动态的渲染不同的子标签,假如当前的路由为/web/a
则<Outlet />
等效于<h1>a</h1>
)
useParams 和 useSearchParams
URL中传递参数
解析URL:
<Route path="/linux/:chapter_id/:section_id/" element={<Linux />} />
获取参数,类组件写法:
import React, { Component } from 'react';
import { useParams } from 'react-router-dom';
class Linux extends Component {
state = { }
render() {
console.log(this.props.params);
return <h1>Linux</h1>;
}
}
export default (props) => (
<Linux
{...props}
params={useParams()}
/>
)
函数组件写法:
import React, { Component } from 'react';
import { useParams } from 'react-router-dom';
const Linux = () => {
console.log(useParams());
return (<h1>Linux</h1>);
}
export default Linux;
Search Params传递参数
类组件写法:
import React, { Component } from 'react';
import { useSearchParams } from 'react-router-dom';
class Django extends Component {
state = {
searchParams: this.props.params[0], // 获取某个参数
setSearchParams: this.props.params[1], // 设置链接中的参数,然后重新渲染当前页面
}
handleClick = () => {
this.state.setSearchParams({
name: "abc",
age: 20,
})
}
render() {
console.log(this.state.searchParams.get('age'));
return <h1 onClick={this.handleClick}>Django</h1>;
}
}
export default (props) => (
<Django
{...props}
params={useSearchParams()}
/>
);
函数组件写法:
import React, { Component } from 'react';
import { useSearchParams } from 'react-router-dom';
const Django = () => {
let [searchParams, setSearchParams] = useSearchParams();
console.log(searchParams.get('age'));
return (<h1>Django</h1>);
}
export default Django;
Navigate
引入
import {Routes, Route, Navigate} from 'react-router-dom';
使用
<Route path="*" element={ <Navigate replace to="/404" /> } />
在React中使用Redux
redux将所有数据存储到树中,且树是唯一的。
Redux基本概念
store
:存储树结构。state
:维护的数据,一般维护成树的结构。reducer
:对state
进行更新的函数,每个state
绑定一个reducer
。传入两个参数:当前state
和action
,返回新state
。action
:一个普通对象,存储reducer
的传入参数,一般描述对state
的更新类型。dispatch
:传入一个参数action
,对整棵state
树操作一遍。React-Redux基本概念
Provider
组件:用来包裹整个项目,其store
属性用来存储redux
的store
对象。connect(mapStateToProps, mapDispatchToProps)
函数:用来将store
与组件关联起来。mapStateToProps
:每次store
中的状态更新后调用一次,用来更新组件中的值。mapDispatchToProps
:组件创建时调用一次,用来将store
的dispatch
函数传入组件。
安装
npm i redux react-redux @reduxjs/toolkit
使用
导入包
在定义store的jsx中导入,当然如果是写在一个文件中就没关系
import { configureStore } from "@reduxjs/toolkit";
在main.jsx/index.jsx中导入Provider
import { Provider } from 'react-redux';
在每一个需要使用到redux全局变量的组件内部导入connect
import { connect } from 'react-redux';
定义actions
可以单独写一个文件,中放一个对象的全局变量来存actions
定义reducer
reducer是一个函数,需要传入两个参数,一个是state,另外一个是action
action是一个对象,state是当前存的数据,需要赋一个初值
例如:
const reducer = (state="0", action) => {
switch(action.type) {
}
};
state同时可以维护一个对象,此时reducer可以这样写
const reducer = (state={
currentOperand: "",
lastOperand: "",
operation: "",
}, action) => {
switch(action.type) {
default:
return state;
}
};
定义store
const store = configureStore({
reducer: reducer
});
store 和两个reducer的名称可以任意,自己知道就行。
这里reducer和reducer重名,可以只写一个reducer来表示reducer: reducer
例如:
const store = configureStore({
reducer
});
使用store
在main.jsx/index.jsx中将有使用redux的组件用<Provider></Provider>
括起来,同时需要给Provider传一个参数store,就是我们定义的store
例如:
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
mapDispatchToProps
将dispatch函数绑定到组件上
mapDispatchToProps函数定义
例如:
const mapDispatchToProps = {
add_digit: digit => {
return {
type: ACTIONS.ADD_DIGIT,
digit: digit,
}
}
}
使用connect组件绑定
例如:
export default connect(null, mapDispatchToProps)(DigitButton);
之后就可以通过 this.props.add_digit
来使用add_digit函数了
mapStateToProps
将state数据绑定到组件上
mapStateToProps函数定义
例如:
const mapStateToProps = (state, props) => {
return {
currentOperand: state.currentOperand,
lastOperand: state.lastOperand,
operation: state.operation,
}
}
使用connect组件绑定
例如
export default connect(mapStateToProps)(Calculator);
之后就可以通过 this.props. ...
来访问state中的数据了
React中使用Bootstrap
安装
npm i bootstrap
20250405更新
使用reaact-bootstrap
npm install react-bootstrap bootstrap
引入
在main.jsx中引入
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
文档
https://v5.bootcss.com/docs/getting-started/introduction/
https://react-bootstrap.netlify.app/