import React, { useReducer } from 'react'

const initData = 0

const dataReducer = (state: number, action: string) => {
	switch(action) {
		case 'add':
			return state + 1
		case 'reduce':
			return state - 1
		case 'reset':
			return state = 0
		default: throw new Error('Unexpected action')
	}
}

function Main() {
	//

	const [state, dispatch] = useReducer(dataReducer, initData)
	return (
		<div>
			<p>{ state }</p>
			<button 
				onClick={() => {
					dispatch('add')
				}}
			> ➕</button>
			<button 
				onClick={() => {
					dispatch('reduce')
				}}
			> ➖</button>

			{/* 重置 */}
			<button onClick={() => {
				dispatch('reset')
			}}>重置</button>
		</div>
	)
}

export default Main

import React from 'react';


interface IState {
	date: string
}

interface IProps {
	title: string
}
class Main extends React.Component<IProps, IState > {
	static defaultProps = {
		title: '您好'
	}
	constructor(props: IProps) {
		super(props)
		this.state = {
			date: '2020-02-09'
		}
	}

	render() {
		const { date } = this.state

		return (
			<div>
				<p>{ date }</p>
				<p>{this.props.title}</p>
			</div>
		)
	}
}

export default Main