coderYYA的博客

react hooks

import { useEffect, useRef, useReducer } from 'react'const useCallBackReducer = (reducer, initialState) => { const [state, dispatch] = useReducer(reducer, initialState) const isUpdate = useRef() useEffect(() => { if (isUpdate.current) { /..

useState的回调版本，在第二个参数回调函数的参数中可以获取到更新后的state，进而在函数体中做一些逻辑操作。import { useEffect, useRef, useState } from 'react'// useState的回调版,// 可以在第二个参数=>回调函数的第一个参数nextValue中拿到更新的state值，并在函数体中执行某些逻辑操作// setState(// (preValue) => preValue + value,//

Input{ label: '姓名', name: 'username', value: state.username, placeholder: '请输入姓名', type: 'Input', onChange: (e) => { dispatch({ type: `change_${e.target.name}`, data: e.target.value, key: e.target.n...

/* * @Description: * @Date: 2022-02-27 22:29:33 * @LastEditTime: 2022-02-28 01:17:41 * @FilePath: \test3\src\pages\VirtualizedScroll\index.jsx */import { InfiniteLoader, List } from 'react-virtualized'import { Spin } from 'antd'import { LoadingOut.

input输入框与React的state双向绑定input 的 value事件函数 绑定 this.state.info (单向流绑定)<input type="text" value={this.state.info}> //此时输入框为read-only状态， //输入内容会报错。需要添加onChange事件函数 或者 添加属性 readOnlyinput 的 onChange事件函数传入事.

当后代组件生命周期（render）发生错误时，为了保证页面不会全部崩掉 state={ hasError:'' }static getDeriveStateFromError(error){ return {hasError:error}} componentDidCatch(error,info){ console.log("捕获到了错误，发送给后台") }在渲染组件的时候判断一下{this.state.hasError ? <h3>网络繁忙，请稍后再试&.

AdvanceSearchForm组件/* * @Description: * @Date: 2022-02-22 17:36:28 * @LastEditTime: 2022-02-22 21:24:53 * @FilePath: \testpull\githubreact\src\pages\AdvanceSearchForm\index.jsx */import React, { useState } from 'react'import { Form, Row, Col, But

父组件import React, { useRef } from 'react'import YaForm from './Form'import YaModal from '@/component/Modal'import { Button } from 'antd'const YaLogin = () => { const modalRef = useRef() const handleShowModal = () => { modalRef.current.show

useContext 共享Context如果是路由组件的话，直接将父组件生成的context组件包裹 路由 Switch 选项父组件生成 contextexport const UserContext = createContext()​用 UserContext 包裹需要接受数据的子组件<UserContext.Provider value={name:"孙悟空"}> <子组件/></UserContext.Provider>子组件使用

react个人笔记