需要注意的是, 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;