Hooks是React16.8一个新增项，是我们可以不用创建class组件就能使用状态和其他React特性
状态钩子 State Hook
- 创建HooksTest.js
import React, { useState } from "react";
export default function HooksTest() {
// useState(initialState)，接收初始状态，返回一个状态变量和其更新函数
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
更新函数类似setState，但它不会整合新旧状态
- 声明多个状态变量
export default function HooksTest() {
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
return (
<div>
<p>年龄 {age}</p>
<p>水果 {fruit}</p>
<ul>
{todos.map(todo=><li key={todo.text}>{todo.text}</li>)}
</ul>
</div>
);
}
副作用钩子 Effect Hook
-
更新HooksTest.js
import React, { useState, useEffect } from "react"; useEffect(() => { // Update the document title using the browser API document.title = `您点击了 ${count} 次`; });
