https://reactjs.org/docs/hooks-intro.html

https://www.npmjs.com/package/react

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring

https://github.com/rehooks/awesome-react-hooks

https://github.com/streamich/react-use

改写前

src/App.js

import React, { Component } from 'react';

class App extends React.Component {
  state = {
    count: 0
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

export default App;

改写后

src/App.js

import React, { useState } from 'react';

const App = (props) => {
  const [count, setCount] = useState(0)

  // componentDidMount() {
  //   document.title = `You clicked ${this.state.count} times`;
  // }
  //
  // componentDidUpdate() {
  //   document.title = `You clicked ${this.state.count} times`;
  // }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default App;