文章目录
React 个人笔记
semantic ui
在html中加入这样一行代码
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
axios的使用
- 可以创建一个接口,比如此处创建了一个lms的接口
import axios from "axios"; export default axios.create({ baseURL:"/lms",//基础公用的网址 params:{}//相关的参数 });
- post请求
const respond = await lms.post( "/json/account/getUser", {}, { params:{} } )
- get请求
const respond = await lms.get(`json/learning/listTeacherResource?courseId=${id}`);
路由的使用
<Router history={history}>
<Route path="/" exact component={Login}></Route>
<Route path="/main" component={Main}></Route>
<Route path="/lesson/:id" exact component={LessonDetail}></Route>
</Router>
exact 修饰符表示组件只对应唯一特定的网址。
获取网址后面的附带的参数
如上面的“lesson/:id”的id,获取方式如图
const id = props.match.params.id;
history的使用
浏览器可以保存浏览器浏览的历史,重新回到页面后数据不会丢失。
- 创建history.js文件
import {createBrowserHistory} from 'history'; export default createBrowserHistory();
- 导入history组件
import history from './history';
- 使用history组件(这里举例说明)
- 在Router中使用
const App=()=>{ return ( <Router history={history}> <Route path="/" exact component={Login}></Route> <Route path="/main" component={Main}></Route> <Route path="/lesson/:id" exact component={LessonDetail}></Route> </Router> ) }
- 在普通组件的使用,用于跳转页面
history.push(url)
- 在Router中使用
Redux的使用
store的引入
//引入redux
import { createStore } from 'redux';
import reducer from './reducer';
//创建store并且传递把reducer传递进来
const store = createStore(reducer);
export default store;
在index.js文件中使用
ReactDOM.render(
<Provider store={store}>
<App/>
</Provider>,
document.querySelector("#root"));
redux-thunk的引入
由于actions只能返回一个对象,而不能返回一个函数,所以redux-thunk的引入就极为重要了。
引入:
import thunkMiddleware from 'redux-thunk'
const store = createStore(reducer, applyMiddleware(thunkMiddleware))
redux开发工具的使用
想要使用redux监测数据的变化,需要在外面包裹一层composeEnhancers。代码如下
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer,composeEnhancers(applyMiddleware(reduxThunk)));
actions
这里不多说,举例说明
1.返回对象
export const changeChoice = (num) => {
return{
type:"CHANGE_CHOICE",
payload:num
}
}
- 返回函数
export const dataRequest = ()=>async dispatch =>{
const respond = await lms.post(
"/json/account/getUser",
{},
{
params:{}
}
)
dispatch({type:"DATA_REQUEST",payload:respond.data})
}
- 导入并使用actions函数
import { signIn,dataRequest,lessonsFetch,changeChoice } from '../../actions'; ........ export default connect( mapStateToProps, {signIn,dataRequest,lessonsFetch,changeChoice} ) (Form);
Reducer
reducer文件
- index.js文件,这里负责整合各种reducer文件,举例如下
import { combineReducers } from "redux"; import {authReducer} from "./authReducer"; import {dataReducer} from "./dataReducer" import { lessonReducer } from "./lessonReducer"; import { choiceReducer } from "./ChoiceReducer"; import { createReducer } from "./createReducer"; import { detailReducer } from "./detailReducer"; export default combineReducers({ auth: authReducer, data: dataReducer, lesson: lessonReducer, choice:choiceReducer, create:createReducer, detail:detailReducer })
- 各个reducers文件:
- if 判断
export const choiceReducer = (state={},action) => { if(action.type==="CHANGE_CHOICE"){ return {...state,choice:action.payload} } return state; }
- switch 判断
export const createReducer = (state={},action) => { switch(action.type){ case "NAME_COLLECT": { return {...state,name:action.payload} } case "OPEN_COLLECT":{ return {...state,isOpen:action.payload } } case "HOUR_COLLECT":{ return {...state,hours:action.payload} } case "CREDIT_COLLECT":{ return {...state,credit:action.payload} } case "ERROR_COLLECT":{ return {...state,error:action.payload} } case "START_DATA_COLLECT":{ return {...state,startDate:action.payload} } case "END_DATA_COLLECT":{ return {...state,endDate:action.payload} } default:return state; }
``` - if 判断
增删改的基本操作
1. remove an elment from array:
state.filter(element=>element!=="hi")
2. add an element to an array:
[...state,'hi']
3. replace an element in an array:
state.map(el=>el!==='hi'?'bye':el)
4. update an property in an object:
{...state,name:'Sam'}
5. Adding a property to an object:
{...state,age:30}
6. remove a property from an object:
{...state,age:undefined}
_.omit(state,'age')
使用redux的数据
用到这样一个函数,mapStateToProps,将redux中state的数据转化为该组件
const mapStateToProps = state => {
return {
isSignIn:state.auth.isSignIn,
error : state.auth.error
}
}
export default connect(
mapStateToProps,
{signIn,dataRequest,lessonsFetch,changeChoice}
) (Form);
Modal的使用
创建modal的方法:
- 在public的index文件里加入一个div
<body> <div id="root"></div> <div id="modal"></div> </body>
- 创建modal文件
return ReactDOM.createPortal(html结构, document.querySelector("#modal"))
- 通过isShow在按钮的点击事件中显示或隐藏该modal