媒易网络网站建设培训,高端网站建设方案模板范文,做网站建设的目的,网络品牌塑造什么是自定义 hooks
自定义hooks是react提供的编写公共函数的方法
自定hooks 和 通用函数的区别
一定有人会说 hooks 可以使用react 的方法#xff0c;但是公共函数也可以#xff0c;因为 jsx 语法的原因 函数必须开头进行大写
其实这些都是 react 的语法规范#xff…
什么是自定义 hooks
自定义hooks是react提供的编写公共函数的方法
自定hooks 和 通用函数的区别
一定有人会说 hooks 可以使用react 的方法但是公共函数也可以因为 jsx 语法的原因 函数必须开头进行大写
其实这些都是 react 的语法规范我们用hooks 也是方便用于管理、
总结 jsx 会将 函数开头大写 和 use 定义的标识为react 函数 可以使用react 内部的属性以及方法
案例
classname import { useState,useEffect } from reactconst UseClass (...argus) {const [state,setState] useState()useEffect(() {setState(argus.join( ))},[])return state}
export default UseClass
使用
/* eslint-disable no-unused-expressions */
import React ,{ useEffect} from react
import {useState} from react
import { LockOutlined, UserOutlined } from ant-design/icons;
import { Button, Checkbox, Form, Input } from antd;
import logincss from ./index.module.css
import Store from ../../Redux/redux;
import { BrowserRouter, Route, Routes,Link,Outlet,useNavigate} from react-router-dom
import UseClass from ./className;
const Log () {const usenavigate useNavigate()// userstate 功能进行数据的绑定舰艇 两个参数 第一个为数据第二个为函数形式的变化只有通过函数进行改动才能更新页面的数据let [[form],setform] useState(Form.useForm())const linitform {password:123456,username:wangchangzhou}const login () {console.log(deng录)// eslint-disable-next-line react-hooks/rules-of-hooksusenavigate(/home,{state:{login:true}}) Store.dispatch({type:login,login:true})}const valueSet () {const time nullif(time){clearTimeout(() {})}setTimeout(() {console.log(KKKKKKK)})}const getValue () {}useEffect(() {// console.log(useClass(logincss.login_bution,logincss.login_bution_BACK),返回值)},[])const fundom (value) {if(value 取消) {form.resetFields()}else {login()// console.log(form.getFieldsValue());// let value form.getFieldsValue()// console.log(linitform value)// // eslint-disable-next-line no-unused-expressions// if(linitform.password form.getFieldsValue().password linitform.password form.getFieldsValue().password ){// login()// }}}return(button className{UseClass(logincss.login_bution,logincss.login_bution_BACK)} onClick{getValue()}1/buttonbutton onClick{getValue()}2jn kkkkkkkkk/button/)
// return(
// div className{logincss.log_box}
// Form
// form{form}
// className{logincss.log_box_from}
// namenormal_login
// initialValues{{// }}//
// div
// span style{{fontSize:20px,textShadow:4px 4px 4px}}低代码测试/span
// Form.Item
// className{logincss.log_box_item}
// nameusername
// label 名称
// rules{[
// {
// required: true,
// message: Please input your Username!,
// },
// ]}
//
// Input prefix{UserOutlined classNamesite-form-item-icon /} placeholder请输入用户名 /
// /Form.Item
// Form.Item
// className{logincss.log_box_item}
// namepassword
// label 密码
// rules{[
// {
// required: true,
// message: 请输入密码,
// },
// ]}
//
// Input
// prefix{LockOutlined classNamesite-form-item-icon /}
// typepassword
// placeholder请输入密码
// /
// /Form.Item
// {/* Form.Item className{logincss.log_box_item}
// Form.Item nameremember valuePropNamechecked noStyle
// CheckboxRemember me/Checkbox
// /Form.Item */}
// {/*
// a classNamelogin-form-forgot href
// 记住密码
// /a
// /Form.Item */}// Form.Item className{logincss.log_box_item}
// Button onClick{(){ return fundom(登陆) }} typeprimary htmlTypesubmit classNamelogin-form-button
// 登录
// /Button
// Button onClick{(){ return fundom(取消) }} style{{marginLeft: 20px}} typeprimary htmlTypesubmit classNamelogin-form-button
// 取消
// /Button
// /Form.Item
// /div
// /Form
// Outlet/Outlet
// /div
// )
}
export default Log
