安装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) {  
      
    },  
});

安装

安装Route组件:

npm i react-router-dom

Route组件介绍

  • BrowserRouter:所有需要路由的组件,都要包裹在BrowserRouter组件内
  • Link:跳转到某个链接,to属性表示跳转到的链接
  • Routes:类似于C++中的switch,匹配第一个路径
  • Route:路由,path属性表示路径,element属性表示路由到的内容
  • useParamsuseSearchParams 获取路径参数
  • 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" /> } />

redux将所有数据存储到树中,且树是唯一的。

Redux基本概念

  • store:存储树结构。
  • state:维护的数据,一般维护成树的结构。
  • reducer:对state进行更新的函数,每个state绑定一个reducer。传入两个参数:当前stateaction,返回新state
  • action:一个普通对象,存储reducer的传入参数,一般描述对state的更新类型。
  • dispatch:传入一个参数action,对整棵state树操作一遍。

    React-Redux基本概念

  • Provider组件:用来包裹整个项目,其store属性用来存储reduxstore对象。
  • connect(mapStateToProps, mapDispatchToProps)函数:用来将store与组件关联起来。

    • mapStateToProps:每次store中的状态更新后调用一次,用来更新组件中的值。
    • mapDispatchToProps:组件创建时调用一次,用来将storedispatch函数传入组件。

安装

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中的数据了