在React16.7.0.alpha版本之前，React里的函数组件是不能有自己的状态的，如果要有自己的状态，必须使用class组件。
React16.7.0.alpha版本新增了Hooks来解决这个问题。
State Hooks
看个例子
function App() {
return (
<div>
<div>{count}</div>
<button onClick={add}>+1</button>
</div>
);
}
如果要实现上面代码的功能，必须要有一个count变量，所以要么得在App外面声明count，要么就得把App变成class组件。
现在有了Hooks，就可以在function里有自己的状态了。
要使用Hooks，前提是React必须是16.7.0-alpha版本以上，然后先引入它
import { useState } from 'react';
然后在function里
function App() {
const [count/*值*/,setCount/*更新函数*/] = useState(0);
const add = () => {
setCount(count + 1)
}
return (
<div>
<div>{count}</div>
<button onClick={add}>+1</button>
</div>
);
}
useState可以用在更复杂的地方
function App() {
const [count,setCount] = useState(0/*初始值*/);
const [user, setUser] = useState({
name: 'jack',
age: 18 ,
hobby:['lol','cat','code']
}/*初始值*/)
const add = () => {
setCount(count+1)
}
const old = () =>{
setUser({
...user, //此处表示拷贝user的所有属性
age: user.age + 1
})
}
const addHobby = () => {
let newHobby = Math.random();
setUser({
...user,
hobby:[...user.hobby,newHobby]
})
}
return (
<div>
<div>{count}</div>
<button onClick={add}>+1</button>
<div>{user.name},{user.age}<br/>{user.hobby.join(',')}</div>
<button onClick={old}>+1</button>
<button onClick={addHobby}>增加爱好</button>
</div>
);
}
const [count,setCount] = useState(0/*初始值*/);只能写在function里
useEffect Hooks
首先来了解一下什么是副作用(Side Effect):
副作用(Side Effect)是指函数或者表达式的行为依赖于外部世界
是不是有点看不懂。。。 还是举例说明吧
f1是没有作用的函数，f2函数依赖了外部的console.log，当外部修改了console.log，f2就会发生变化，这样的函数就是有副作用的函数，而f3，无论修改什么它的返回值都是a+b，所以把这样的函数称为纯函数。
useEffect的作用就是把有副作用的东西写在这个里面
还是来看代码
<body>
<div id="box" style="border:1px solid red"></div>
<div id="root"></div>
</body>
import React from "react";
import ReactDOM from "react-dom";
import { useState, useEffect } from 'react';
import "./styles.css";
function App() {
const [count,setCount] = useState(0/*初始值*/);
useEffect(() => {
document.querySelector('#box').innerHTML = count;
});
const add = () => {
setCount(count+1)
}
return (
<div>
<div>{count}</div>
<button onClick={add}>+1</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
可以看到，对于React来说，id为box的div是未知的，它对于App来说是有副作用的，所以放在useEffect里
网友评论