当前位置：首页 > news >正文

React学习笔记（4.0）

news 2025/7/8 11:46:25

json-server实现数据Mock

1.项目中安装json-server

npm i -D json-server

2.准备一个json文件

3.添加启动命令【package.json中配置】

"server":"json-server ./server/data.json --port 8888"

该命令中，路径就是自己创建的json文件路径，端口也可以自定义，不要写默认其他服务的保留端口即可。

4.进行接口访问

React使用redux

React使用redux，官方要求安装两个插件--Redux Toolkit 和react-redux

命令如下：

npm i @reduxjs/toolkit react-redux

在项目中，一般都放在store文件夹中，对应的模块放入modules文件夹里，对应的目录结构如下

index.tsx文件内容

import {configureStore} from "@reduxjs/toolkit"
import counterReducer from "./modules/counterStore"
import channelReducer from "./modules/channelStore"
import foodsReducer from "./modules/takeaway"
const store=configureStore({reducer: {counter:counterReducer,channel:channelReducer,foods:foodsReducer},})export default store

然后再对应的modules文件夹里书写具体配置内容

以counterStore举例

//第一步：调用@reduxjs/tookit的createSlice方法
import {createSlice} from '@reduxjs/tookit'const counterStore=createSlice({
//给仓库起的名字name: 'counter',
//就是状态，类似与vux和pinia的StateinitialState: {count2:0},
//同步方法的书写都在这里//编写修改数据的方法 同步方法，支持直接修改reducers: {increment(state:any) {return state.count2 + 1;},decrement(state:any) {return state.count2 - 1;},addToNum(state:any,action:any){state.count=action.payload}}
})//结构出来actionCreater函数
const { increment,decrement,addToNum}=counterStore.actions
//获取reducer
const reducer=counterStore.reducer//导出对应的方法
export{ increment,decrement,addToNum}
//已默认导出的方式导出export default reducer;

这里只有同步的代码，如果有异步的代码，需要借助dispatch（）方法，

带有异步方法的channelStore

import {createSlice} from "@reduxjs/toolkit"const channelStore=createSlice({name: "channel",//数据状态StateinitialState: {channelList: []},reducers: {//同步修改方法setChannels(state:any, action:any) {state.channelList = action.payload}}
})//结构出actionCreater函数
const {setChannels}=channelStore.actions
//异步请求部分
const fetchChannelList=()=>{return async(dispatch:any)=>{const res=await axios.get('http://localhost:8080')dispatch(setChannels(res.data.data.channels))}
}export {fetchChannelList}const reducer=channelStore.reducerexport default reducer

此时还需要再主文件中进行注册，才能使用

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import {Provider} from 'react-redux'
import store from './store/index.tsx'
// import './index.css'createRoot(document.getElementById('root')!).render(<StrictMode><Provider store={store}><App /></Provider></StrictMode>,
)

来到组件中使用

import {useSelector,useDispatch} from 'react-redux'
//导入actionCreater
import {increment,decrement,addToNum} from './store/modules/counterStore'
import {fetchChannelList} from './store/modules/channelStore'const App = () => {const {count2}=useSelector((state:any)=>state.counter)const {channelList}=useSelector((state:any)=>state.channel)const dispatch=useDispatch()//使用useEffect触发异步请求执行useEffect(()=>{dispatch(fetchChannelList())},[dispatch])let list=['1','2','3'];// for(let i=0;i<list.length;i++){//   list[i]=<li>{list[i]}</li>// }const myClass = ['box1', 'box2']const myClass2 = classNames({box1:true,box2:true,[style.box5]:true})//useState实现一个计数器按钮const [count,setCount] = React.useState(0)const handleClick4=()=>{setCount(count+1)console.log('click',count);}const [form ,setForm]=useState({name:'mez',age:18})const handleClick5=()=>{setForm({...form,name:'jack'})}// 1.声明一个React状态const [value,setValue]=useState('')//2.核心绑定流程//①通过value属性绑定React状态//②绑定onChange事件，通过事件参数e拿到输入框最新的值，反向修改到React状态
// const setValue=()=>{// }//dom生成之后才可用--useRefconst inputRef=useRef<HTMLInputElement>(null)
const showDom=()=>{console.log(inputRef.current);console.log(inputRef.current?.value);}
//获取foodsList渲染数据列表
//useSelectorreturn (<><div><div className={myClass.join(' ')}>App</div><div style={{color:"purple",fontWeight:900}}>App2</div><div className={myClass2}> hello world!</div><button onClick={handleClick}>click me</button><button onClick={handleClick2(123)}>click me2</button><button onClick={(e)=>handleClick3(456,e)}>click me3</button><input type="text" onChange={(e)=>handleChange(e,'jack')} placeholder='请输入内容' />{list.map((item,index) => <li key={index}>{item}</li>)}<Button></Button><button onClick={handleClick4}>加一</button><button onClick={handleClick5}>修改对象</button><div>{count}--{form.name}</div><div className={classNames('box3',{box2:1===1})}>我是使用classnames的文本</div>{/* <input type="text" value={value}onChange={(e)=>setValue(e.target.value)}ref={inputRef}/> */}<input type="text" value={value}onChange={(e)=>setValue(e.target.value)}ref={inputRef}/><button onClick={showDom}>获取dom</button></div><div>{count2}</div><button onClick={()=>dispatch(decrement())}>-</button><button onClick={()=>dispatch(increment())}>+</button><button onClick={()=>dispatch(addToNum(10))}>add to 10</button><ul>{channelList.map((item:any)=><li key={item.id}>{item.name}</li>)}</ul></>)
}export default App