React 表单组件实现
一、介绍 本文将会基于react实现表单的功能，包括表单提交和跳转、表单验证、动态表单元素、动态内容加载。 二、使用教程 1.表单提交功能 export default class FormSubmit extends React.PureComponent{ state = { name: "" } handleNameChange = evt => { this.setState({ n...
Vue3中定义变量是选择ref还是reactive？
目录 ref和reactive的优势 1. ref 优势： 应用场景： 示例： 2. reactive 优势： 应用场景： 示例： ref和reactive的劣势 1. ref 2. reactive 应用案例 总结 ref和reactive的优势 1. ref ref是Vue3中专门用来创建响应式变量的函数，它返回一个具有value属性的对象。ref可以用来包裹基本类型的值，比如数字和字符串。 优势：...
React使报错不再白屏
<div>下面是标题</div> <Head /> </> )} 如上代码只是Head组件中出现了报错，如果只想给出错误信息，但是其他组件仍要正常显示该怎么做呢？ 需要下载使用第三方库 npm i react-error-boundary 将可能会报错的组件包裹起来即可 import { ErrorBoundary } from "react-error-boundary" function Head()...
React立即更新DOM
正常情况下，react会等待set完毕后再进行页面渲染，所以在set时无法拿到更新后的dom import { useRef, useState } from "react" export default () => { const div = useRef(null) const [count, setCount] = useState(0) const btnClick = () => { setCo...
React - 表单组件实现
一、介绍 本文将会基于react实现表单的功能，包括表单提交和跳转、错误处理、动态表单元素、动态内容加载。 二、使用教程 1.表单提交功能 export default class FormSubmit extends React.PureComponent{ state = { name: "" } handleNameChange = evt => { this.setState({ n...
Reactor实战，创建一个简单的单线程Reactor（理解了就相当于理解了多线程的Reactor）
单线程Reactor package org.example.utils.echo.single; import java.io.IOException;import java.net.InetSocketAddress;import java.nio.channels.*;import java.util.Iterator;import java.util.Set; public class Ec...
React使用TailwindCSS
React中使用TailwindCSS 下载及初始化 可以查看官网对照自己使用的框架进行配置 npm install -D tailwindcss postcss autoprefixer 下载完毕后执行如下命令 npx tailwindcss init -p 可以发现项目中多了两个文件 其中默认已经进行了配置，我们需要将tailwind.config.js更改配置为如下： /** @type {impo...
React如何检查组件性能
lDuration-baseDuration为组件执行时间startTime： 初始化渲染时间commitTime： 提交时间 import { Profiler, useState } from "react" function Head({ count }) { return <div>Head --- count:{count}</div>}export default () => { const...
笔记二十五、React中setState是同步还是异步的？
代码 import React, {Component} from 'react'; class Async extends Component { state = {count: 0} add = () => { // {count: this.state.count + 1} this.setState(() => ({count: this.state.count + 1}), () => { /...
React自定义Hook之useModel hook
一、概述 useModel hook是React Hook中一个自定义的钩子函数，用于管理应用程序中的状态和逻辑。它主要用于组件之间的状态共享和通信。 useModel hook通常包含以下几个步骤： 1.创建模型：定义需要共享的状态和相关的方法，可以使用React的useState、useEffect等其他钩子。 ...