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);