React学习笔记（4.0）

news2024/10/1 13:54:35

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的State
    initialState: {
        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",
    //数据状态State
    initialState: {
        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.reducer

export 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生成之后才可用--useRef

const inputRef=useRef<HTMLInputElement>(null)
const showDom=()=>{
  console.log(inputRef.current);
  console.log(inputRef.current?.value);
  
}
//获取foodsList渲染数据列表
//useSelector
  return (
    <>
    <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