react-hook 与计数器

141 字

1 分钟

react-hook 与计数器

2020-03-30

技术文章

后端

架构

post

Hook 是 React 16.8 的新增特性，官网有一个相当简单的示例来展示它的用法

1
import React, { useState } from 'react';
2

3
function Example() {
4
  const [count, setCount] = useState(0);
5

6
  return (
7
    <div>
8
      <p>You clicked {count} times</p>
9
      <button onClick={() => setCount(count + 1)}>
10
        Click me
11
      </button>
12
    </div>
13
  );
14
}

一见倾心，它的简洁深深打动了我。于是我决定为它添加几行代码写个计数器:

1
import React, { useState } from 'react';
2

3
function Example () {
4
  const [count, setCount] = useState(0);
5

6
  const countdown = () => {
7
    setTimeout(() => {
8
      setCount(count + 1)
9
      countdown()
10
    }, 1000)
11
  }
12

13
  return (
14
    <div>
15
      <p>You clicked {count} times</p>
16
      <button onClick={countdown}>
17
        Click me
18
      </button>
19
    </div>
20
  );
21
}