[JavaScript知识库]React个人笔记

React 个人笔记

semantic ui

在html中加入这样一行代码

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>

axios的使用

1. 可以创建一个接口，比如此处创建了一个lms的接口

   import axios from "axios";
   
   export default axios.create({
       baseURL:"/lms",//基础公用的网址
       params:{}//相关的参数
   });
   

2. post请求

    const respond = await lms.post(
       "/json/account/getUser",
       {},
       {
           params:{}
       }
   )
   

3. 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的使用

浏览器可以保存浏览器浏览的历史，重新回到页面后数据不会丢失。

1. 创建history.js文件

   import {createBrowserHistory} from 'history';
   
   export default createBrowserHistory();
   

2. 导入history组件

   import history from './history';
   

3. 使用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)
     

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
    }
}

2. 返回函数

export const dataRequest = ()=>async dispatch =>{
    const respond = await lms.post(
        "/json/account/getUser",
        {},
        {
            params:{}
        }
    )
    dispatch({type:"DATA_REQUEST",payload:respond.data})
}

3. 导入并使用actions函数

   import { signIn,dataRequest,lessonsFetch,changeChoice } from '../../actions';
   ........
   export default connect(
   mapStateToProps,
   {signIn,dataRequest,lessonsFetch,changeChoice}
   ) (Form);
   

Reducer

reducer文件

1. 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
   })
   

2. 各个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;
     }
     

   }
   ```

增删改的基本操作

 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的方法：

1. 在public的index文件里加入一个div

     	<body>
         	<div id="root"></div>
         	<div id="modal"></div>
       </body>
   

2. 创建modal文件

   return ReactDOM.createPortal(html结构, document.querySelector("#modal"))
   

3. 通过isShow在按钮的点击事件中显示或隐藏该modal

Context 的使用

这里不多说，详情看官方文档，这里 或者这篇博客