复习常用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>

常用hook和函数组件props

复习常用hook

useReducer

函数组件props传值

猜你喜欢