class写法
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
interface Props {
message: string;
}
interface State {
n: number;
}
class App extends React.Component<Props, State> {
static defaultProps = {
message: "default message"
};
constructor(props) {
super(props);
this.state = {
n: 1
};
}
x = () => {
this.setState({
n: 2
});
};
componentDidMount() {}
render() {
return <div>App</div>;
}
}
export default App;
函数写法
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";
import "./styles.css";
interface Props {
message?: any;
}
interface User {
id: string;
name: string;
}
const App: React.FunctionComponent<Props> = ({
message = "default message"
}) => {
const [n, setN] = useState(1);
const [m, setM] = useState(2);
const [user, setUser] = useState<User>(null);
const x = () => {
setN(n + 1);
};
const y = () => {
setM(m + 1);
};
useEffect(() => {
console.log("mounted");
return () => {
console.log("我死了");
};
}, []);
message.split("");
return (
<div>
<h1>{message}</h1>
<div>
{n}, {m}
</div>
<button onClick={x}>n+1</button>
<button onClick={y}>m+1</button>
</div>
);
};
App.defaultProps = {
message: "default message"
};
App.displayName = "Frank";
App.propTypes = {
message: PropTypes.number
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
