Attention：Hooks are a new addition in React 16.8.
所以使用 Hooks 时要注意一下 React 的版本哦。
1. CodeSandBox的使用
使用 CodeSandBox 可以在线创建 React 应用。
小技巧：
- 创建了 React 应用后，需修改版本号时可直接在
package.json里修改，并保存，就会自动加载了。 - 命令行面板上 输入
npm info react versions可查询 React 版本。
2. useState 的使用
首先要引入 useState:
import {useState} from "react"
useState 的使用：
const [state, setState] = useState(initialState);
其中，state表示state的值；setState表示更新 state 的函数；useState返回一个数组，数组的第一项表示state的值；initialState表示 state 的初始值。
示例代码：
function App() {
const [count, setCount] = useState(0)
const add = ()=>{
setCount(count + 1)
}
const minus = ()=>{
setCount(count - 1)
}
return (
<div className="App">
<div>
<span className="value">{count}</span>
</div>
<button onClick={add}>加1</button>
<button onClick={minus}>减1</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
原本函数组件是没有状态的，但自从有了 Hooks，函数组件可以有状态了。
3. useState的更多例子
function App() {
const [user, setUser] = useState({
name: "janice",
age: 18,
hobbies: ["reading", "game", "coding", "basketball"]
});
const addHobbies = () => {
let newHobbies = Math.random();
setUser({
...user,
hobbies: [...user.hobbies, newHobbies]
});
};
const delHobbies = () => {
user.hobbies.splice(1, 1);
setUser({
...user,
hobbies: user.hobbies
});
};
return (
<div className="App">
<div>
{user.name} , {user.age}
</div>
<div>{user.hobbies.join(" , ")}</div>
<button onClick={addHobbies}>增加爱好</button>
<button onClick={delHobbies}>删除爱好</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
4. useEffect的使用
使用 useEffect 处理副作用，下面举例说明一下什么是副作用：
function f1() {} // f1是没作用的函数
function f2() { // f2是有副作用的函数
console.log(1)
}
function f3(a, b) { // f3是纯函数，又称没有副作用的函数
return a + b
}
- 在 函数
f2中，依赖了console.log(1), 依赖的东西可能会被修改，有可能会产生意外的结果。
依赖了不知从哪来的东西的函数就是有副作用的函数。 - 函数
f3是纯函数，又称没有副作用的函数，即不依赖外部不知从哪来的东西。
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
//把有副作用的函数放在useEffect里
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
