React Hooks Sample

需要注意的是, hooks这种新玩意只能用在无状态的函数组件中

还有就是如果你使用create-react-app创建应用, 那么你需要手动修改package.json中的react和react-dom版本号, 因为目前hooks还在阿尔法版本中

import React, { Component } from "react";

import "./App.css";

import Counter from "./Counter";

class App extends Component {

  render() {

    return (

      <div className="App">

        <Counter />

      </div>

    );

  }

}

 

export default App;

import React from "react";

import { useState } from "react";

 

const Counter = () => {

  const [count, setCount] = useState(0);

  return (

    <div>

      <p>You clicked {count} times</p>

      <button onClick={() => setCount(count + 1)}>Click me</button>

    </div>

  );

};

 

export default Counter;

这里还有一个useEffect方法, 每当 React更新之后，就会触发 useEffect（在第一次 render 和每次 update 后触发）

import React from "react";

import { useState, useEffect } from "react";

 

const Counter = () => {

  const [count, setCount] = useState(0);

  useEffect(() => {

    document.title = `You clicked ${count} times`;

  });

  return (

    <div>

      <p>You clicked {count} times</p>

      <button onClick={() => setCount(count + 1)}>Click me</button>

    </div>

  );

};

 

export default Counter;