复习常用hook
useState 函数组件提供状态
业主模块 增加数据表单受控(函数组件)
//定义form表单数据
let [form, setForm] = useState({
name: "",
idcard: "",
});
//受控方法
let change = (e) => {
let { value, name } = e.target;
setForm({ ...form, [name]: value });
};
//表单提交方法
let subInfo = (e) => {
e.preventDefault();
console.log(form);
};
2.useEffect 给函数组件提供类似周期
1.挂载之后延迟执行
2.监听依赖项的变更来执行
3.useMemo
提供计算根据依赖项自动运算
useReducer
该hook类似useState 也是useState的替代方案
作用:函数组件定义状态操作状态
用法:
const [state, dispatch] = useReducer(reducer, initialArg, init);
1.reducer
它接收一个形如 (state, action) => newState 的 reducer,
reducer返回一个新的状态值。
2.并返回当前的 state 以及与其配套的 dispatch 方法。
dispatch 方法就是执行动作指令修改useReducer内部的state状态。
参数:
第一种用法:
1.reducer纯函数
2.state初始化值
使用场景:
当state存在多个值或者存在复杂的业务,这种状态可以使用useReducer代替useState
案例:
完成事项代办:
数据源:代办数量 数据集合
业务:代办的增删
初步写法:
import { useReducer } from "react";
//定义reducer初始值
let initialState = {
count: 0,
todoList: [],
};
//定义reducer函数
function reducer(state, action) {
return state;
}
export default () => {
//使用useReducer 代替 useState
let [state, dispatch] = useReducer(reducer, initialState);
console.log(state);
return (
<>
<div>测试组件</div>
</>
);
};
使用reducer+dispatch触发修改state状态值:
import { useReducer, useRef } from "react";
//定义reducer初始值
let initialState = {
count: 0,
todoList: [],
};
//定义reducer函数
//state 旧的状态值
//action为动作指令 {type:"ADD_TODO",payload:{}}
function reducer(state, action) {
let { type, payload } = action;
switch (type) {
case "ADD_TODO":
//添加的业务
let todoList = [...state.todoList];
todoList.push(payload);
return { ...state, todoList };
case "REMOVE_TODO":
//删除的业务
break;
default:
return state;
}
}
export default () => {
//使用useReducer 代替 useState
let [state, dispatch] = useReducer(reducer, initialState);
//定义节点对象
let iptEle = useRef(null);
//点击按钮添加的事件
let addList = () => {
let value = iptEle.current.value;
//dispatch 触发 执行reducer 操作相关业务
dispatch({ type: "ADD_TODO", payload: { name: value, time: Date.now() } });
};
return (
<>
<div>测试组件</div>
<input type="text" ref={iptEle} /> <button onClick={addList}>add</button>
<div>未完成事项:</div>
<ul>
{state.todoList.map((item, index) => {
return (
<li key={index}>
{item.name}---{item.time}
</li>
);
})}
</ul>
</>
);
};
备注:
函数中定义状态
useState
//定义单个状态 返回是state初值和修改当前state对应的方法
//返回对应修改
useReducer
//是useState替代 返回是state(一个state对应多个状态值)
this.state={
}
返回了一个dispatch 方法也是用来修改state
import { useReducer, useRef } from "react";
//定义一个初始化值
let initialState = {
todoList: [],
count: 0,
isshow: false,
};
//reducer函数
let reducer = (state, action) => {
console.log("ceshi ");
return state;
};
export default () => {
//useReducer 返回的是state状态
//dispatch 用于修改状态的方法
//useReducer 参数1 reducer函数 2 初始状态值
let [state, dispatch] = useReducer(reducer, initialState);
console.log(state);
//useReducer 中参数reducer和初始画状态值 缺一不可。初始化state为undefined
useReducer state值;
1.直接获取渲染
2.开始操作state状态值
useReducer 返回dispatch函数作用用于更新state状态值
dispatch用于触发动作指令(action)
action 的格式 不带参数{type:"ADD_TODO"} 带参数{type:"ADD_TODO",args:''}
使用dispatch 触发动作指令会执行reducer函数
增加和删除
import { useReducer, useRef } from "react";
//定义一个初始化值
let initialState = {
todoList: [],
count: 0,
isshow: false,
};
//reducer函数
let reducer = (state, action) => {
let { type, args } = action;
let todo = [...state.todoList];
switch (type) {
case "ADD_TODO":
//执行添加业务
todo.push(args);
todo.length ? (state.isshow = true) : null;
return { ...state, todoList: todo };
case "REMOVE_TODO":
//执行删除业务
todo.splice(args, 1);
todo.length ? (state.isshow = true) : (state.isshow = false);
return { ...state, todoList: todo };
default:
return state;
}
};
export default () => {
//useReducer 返回的是state状态
//dispatch 用于修改状态的方法
//useReducer 参数1 reducer函数 2 初始状态值
let [state, dispatch] = useReducer(reducer, initialState);
console.log(state);
//定义节点对象
let iptEle = useRef(null);
//点击按钮添加的事件
let addList = () => {
let value = iptEle.current.value;
let todo = {
name: value,
time: new Date().toLocaleString(),
};
//触发
dispatch({ type: "ADD_TODO", args: todo });
};
//删除
let remove = (index) => {
dispatch({ type: "REMOVE_TODO", args: index });
};
return (
<>
<div>测试组件</div>
<input type="text" ref={iptEle} /> <button onClick={addList}>add</button>
{state.isshow ? (
<>
<div>未完成事项:</div>
<ul>
{state.todoList.map((item, index) => {
return (
<li key={index}>
{item.name}---{item.time}---
<button onClick={() => remove(index)}>删除</button>
</li>
);
})}
</ul>
</>
) : null}
</>
);
};
函数组件props传值
export default (props)=>{
return <></>
}
export default function (props){
return <></>
}
函数组件props在函数的形参上。
函数组件传值方式
<Table data={}></Table>
函数组件上约束props
//函数中没有this 只是普通函数
//定义默认值和类型约束只能在函数组件外部
//函数组件需要组件名称
import { useMemo, useState } from "react";
import "../assets/css/my-table.css";
import PropTypes from "prop-types";
let MyTable = (props) => {
let { tableData } = props;
//计算总共多少条数据
let count = useMemo(() => {
return tableData.length;
}, [tableData]);
return (
<>
<div className="table-box">
</div>
</>
);
};
//默认值约束 和 类型检测约束
//定义在外部
MyTable.defaultProps = {
tableData: [],
};
MyTable.propTypes = {
tableData: PropTypes.array,
};
export default MyTable;
//函数组件
<MyTable tableData={resource}></MyTable>