Hook is a new feature in React 16.8. It lets you use state and other React features without having to write a class.

Set up the React infrastructure

Enter the command create-react-app links-demo –template typescript

Use this command to create a typescript-enabled React infrastructure

What is a useState

Every time the chestnut clicks the button, count goes +1.

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

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

	return (
		<div className="App">
			<p>You hit {count} times</p>
			<button onClick={()= >SetCount (count +1)}> Click +1</button>
		</div>
	);
}

export default App;
Copy the code

UseState returns a pair of values: the current state and a function that lets you update it, which you can call in an event handler or some other place. It is similar to the this.setState of the class component, but it does not merge the new state with the old state.

The only argument to useState is the initial state. In the example above, our counter starts at zero, so the initial state is 0. It’s important to note that, unlike this.state, state doesn’t have to be an object — it can be if you need it. The initial state parameter is only used for the first rendering.

The basic usage of useState is shown above.

Examples demonstrate

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. The width}</div>
			<div><Slider min={50} max={500} defaultValue={width} onChange={(value: number) = > setWidth(value || 0)} /></div>
			<div className="Rectangle-name">Height: {style.css. 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">The radius: {style [' border - the radius']}</div>
			<div><Slider min={0} max={150} defaultValue={radius} onChange={(value: number) = > setRadius(value || 0)} /></div>
			<div style={style}></div>
		</div>)}Copy the code

This is the end of the basic use of useState.

Vite2 + VUe3 +TypeScript4 Simple background management system

A few days ago just wrote a vite2+vue3+TypeScript4+elementPlus made of a simple background management system, the subsequent functions are still under development, welcome XDM use, comments 🐶, attached link: github.com/wuguanfei/v…