Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

搭建react基础架构

输入命令：create-react-app hooks-demo --template typescript

使用该命令创建支持typescript的react基础架构

什么是useState

这个栗子每点击一次按钮，count会进行+1。

import { useState } from 'react';
import './App.css';

function App() {
	const [count, setCount] = useState<number>(0);

	return (
		<div className="App">
			<p>你点击了{count}次</p>
			<button onClick={() => setCount(count + 1)}>点击+1</button>
		</div>
	);
}

export default App;

useState 会返回一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或其他一些地方调用这个函数。它类似 class 组件的 this.setState，但是它不会把新的 state 和旧的 state 进行合并。

useState 唯一的参数就是初始 state。在上面的例子中，我们的计数器是从零开始的，所以初始 state 就是 0。值得注意的是，不同于 this.state，这里的 state 不一定要是一个对象 —— 如果你有需要，它也可以是。这个初始 state 参数只有在第一次渲染时会被用到。

useState的基本使用方法如上所示。

实例演示

import { useState } from 'react';
import { Slider } from 'antd';
import '../index'

interface Color {
	r: number,
	g: number,
	b: number,
}

export default function Rectangle() {
	const [width, setWidth] = useState<number>(10);
	const [height, setHeight] = useState<number>(10);
	const [color, setColor] = useState<Color>({ r: 0, g: 0, b: 0 })
	const [radius, setRadius] = useState<number>(0);

	const style = {
		width: `${width}px`,
		height: `${height}px`,
		background: `rgb(${color.r},${color.g},${color.b})`,
		'border-radius': `${radius}px`,
		margin: '50px auto'
	}

	return (
		<div className="Rectangle">
			<div className="Rectangle-name">width：{style.width}</div>
			<div><Slider min={50} max={500} defaultValue={width} onChange={(value: number) => setWidth(value || 0)} /></div>
			<div className="Rectangle-name">height：{style.height}</div>
			<div><Slider min={50} max={500} defaultValue={height} onChange={(value: number) => setHeight(value || 0)} /></div>
			<div className="Rectangle-name">color-R：{color.r}</div>
			<div><Slider min={0} max={255} defaultValue={color.r} onChange={(value: number) => setColor({ ...color, r: value })} /></div>
			<div className="Rectangle-name">color-G：{color.g}</div>
			<div><Slider min={0} max={255} defaultValue={color.g} onChange={(value: number) => setColor({ ...color, g: value })} /></div>
			<div className="Rectangle-name">color-B：{color.b}</div>
			<div><Slider min={0} max={255} defaultValue={color.b} onChange={(value: number) => setColor({ ...color, b: value })} /></div>
			<div className="Rectangle-name">radius：{style['border-radius']}</div>
			<div><Slider min={0} max={150} defaultValue={radius} onChange={(value: number) => setRadius(value || 0)} /></div>
			<div style={style}></div>
		</div>
	)
}

useState的基本使用就到这里结束了。

vite2+vue3+TypeScript4简易后台管理系统

前几天刚写了一个vite2+vue3+TypeScript4+elementPlus做成的一个简易后台管理系统，后续功能还在开发中，欢迎XDM使用，提意见🐶，附上链接：github.com/wuguanfei/v…