react学习

一、react基础

1. jsx
   大括号的作用
   

{count}
{userLlist.map((item)=>{return <li key={item.id}>{item.name}</li>}) }
key是用于react内部渲染处理的

2. 基础条件渲染

{flag && <p>{"显示"}</p>}

3. 复杂条件渲染

function getItem(){if(type==1) return <p>有图模式<p/>else if(type==2) return <>无图</>}

2、useState使用
state是状态变量，数据变化视图变化

const [userList,setUserList]=useState([{id:1,name:"z"}])

3.map,filter函数使用

4.tab切换功能实现

const tab={{type:" ",text:" "}}
//将type设为class高亮

5.loadsh使用排序

import * as _ from 'lodash'
setCommentList(_.orderby(commentList,'star'//字段名，'desc'))
//不改变原数组

6.classnames优化类名控制

7.受控绑定表单

<input value={value} onChange={(e)=>{setValue(e.target.value); //显示输入}}type='text'/>

8.ref获取DOM对象

const inputRef=useRef(null);
<input ref={inputRef}/>
//使用inputRef.current获取DOM对象

9.uuid和dayjs库的使用

10.props使用

用于父传子组件消息

function Son(prop){prop.nameprop.children //特殊属性
}
function Father(prop){return <Son name="xxx"><p>this is span<p/></Son>
}

11.子传父，兄弟之间传消息(利用子传父，父传兄弟)

12.使用Context跨层通信

1、全局中createContext创建一个Context上下文对象
2、上层用<Context.Provider value={mdg}></>传递数据
3、底层用useContext(Context)方法获取数据

*13.UseEffect

    const [commentList,setCommentList]=useState([])useEffect(()=>{async function getCommentList(){// async异步，await等待const res=await fetch('/comment').then(res=>res.json().then(data=>{console.log(data);return data}))   setCommentList(res);}getCommentList()},[])

清除副作用，最常见是在组件卸载时候

14.自定义hook

1. 构造一个use开头的函数名
2. 在函数体内封装可复用的逻辑
3. 把组件中用到的状态变量return出去
   
4. 使用时解构出来
   

---

15.hook使用规则

1.组件外使用 x
2.if，for循环内使用 x

16.json-server和axios使用

二、 react使用redux

在我们继续之前，你需要熟悉一些重要的 Redux 术语：

• state
• action，action 是一个具有 type 字段的普通 JavaScript 对象
• reducer是一个函数，接收当前的 state 和一个 action 对象，必要时决定如何更新状态，并返回新状态。函数签名是：(state, action) => newState。 你可以将 reducer 视为一个事件监听器，它根据接收到的 action（事件）类型处理事件。
• dispatch,调用action
• selector
  

三、美团外卖项目

1. 添加按钮怎么显示？
   解决方法：antd icon
   
2. 滚动菜单如何实现
   解决方法：将延长的区域设置overflow:auto
3. flex
   flex:1 不管内容多少，一般都是平分空间，空间大小都一致、
   而 flex:auto 是根据内容的大小来分，不是平的（除非内容都是一样，才平分）

完成页面制作

使用redux渲染页面

完成购物车功能

store.js
// 编写storeimport { createSlice } from "@reduxjs/toolkit"
import axios from "axios"const foodsStore = createSlice({name: 'foods',initialState: {// 商品列表foodsList: [],// 菜单激活下标值activeIndex: 0,// 购物车列表cartList: []},reducers: {// 更改商品列表setFoodsList (state, action) {// payload是传入的值state.foodsList = action.payload},changeActiveIndex(state,action){state.activeIndex = action.payload},addCart (state, action) {// 是否添加过？以action.payload.id去cartList中匹配 匹配到了 添加过const item = state.cartList.find(item => item.id === action.payload.id)if (item) {item.count++} else {state.cartList.push(action.payload)}},// count增increCount (state, action) {// 关键点：找到当前要修改谁的count idconst item = state.cartList.find(item => item.id === action.payload.id)item.count++},// count减decreCount (state, action) {// 关键点：找到当前要修改谁的count idconst item = state.cartList.find(item => item.id === action.payload.id)if (item.count === 0) {return}item.count--},clearCart(state){state.cartList=[];},}
})// 异步获取部分
const { setFoodsList, changeActiveIndex, addCart, increCount, decreCount, clearCart } = foodsStore.actions
const fetchFoodsList = () => {return async (dispatch) => {// 编写异步逻辑const res = await axios.get('meituan/menu')// 调用dispatch函数提交actiondispatch(setFoodsList(res.data))}
}export { fetchFoodsList, changeActiveIndex, addCart, increCount, decreCount, clearCart }const reducer = foodsStore.reducerexport default reducer

使用react-router-dom

1. 制作路由表

const router = createBrowserRouter([{path:"login",element:<DempPage/>},{path:"index",element:<DempPage/>}
])

• 声明式导航

<Link to='/index'  />

• 编程式导航

useNavigate()

• Routes 多个Route需要Route包起来
• Route
• Outle 给children占位

评价

在img标签里面只设置宽度，不设置高度，图片就会等比例缩放。