React新手学习React Hooks – useState技巧
使用React Hooks的useState来创建一个简单的计数器应用程序,以便产生输出。
创建项目
$ npx create-react-app hooks-tutorial --template typescript
创建Counter.tsx
import React, { useState } from 'react';
const Counter: React.FC = () => {
const [count, setCount] = useState<number>(0);
return (
<>
<h1>{count}</h1>
<button onClick={() => setCount((prev) => prev + 1)}>+</button>
<br />
<button onClick={() => setCount((prev) => 0)}>RESET</button>
</>
);
};
export default Counter;
将App.tsx导入到文件中。
import React from 'react';
import Counter from './components/Counter';
const App: React.FC = () => {
return (
<div className="App">
<Counter />
</div>
);
};
export default App;
计数器应用完成。
