React Hooks的用法及使用规则
React Hooks的用法及使用规则
Hooks是React v16.8加入的新特性。可以在class以外使用state和其他React特性。
1. State(状态) Hook
用法：
import {
useState } from react;
function Example() {
// 声明一个新的状态变量，我们将其称为 "count"
const [count, setCount] = useState(0) // 初始化数字
const [str, setString] = useState("string") // 初始化字符串
const [list, setLists] = useState([{
val: li}]) //初始化数组
const setHandle = () => {
list[0].val = ning
setTodos({
...list,
list
})
}
return (
<>
count: {
count}
str: {
str}
todos: {
list[0].val}
<br/>
<button onClick={
()=>setCount(count+1)}>count handler</button>
<button onClick={
()=>setHandle()}>lists handler</button>
</>
);
}
-
useState两个参数，以数组的形式定义，通过数组解构赋给了声明的一个值引用，一个函数引用； useState返回第一个参数是 state 的属性； 第二个是用于修改这个属性的方法，传入参数为该属性的默认值； 设定的默认值仅仅是用在第一次render执行期间.，之后的更新就与这个默认值无关； state hook 不必使用setState更新, 也不必在 constructor 中绑定。
2. Effect(副作用) Hook
-
useEffect在 React 的生命周期中相当于componentDidMount, componentDidUpdate, 和componentWillUnmount. 第二个参数不填代表任意 state 改变都将触发这个 effect
useEffect(() => {
});
-
只想执行一个 Effect 一次(挂载和卸载时),那么可以在 useEffect 的第二个参数中传入空数组；
useEffect(() => {
}, []);
-
希望 state 某个值或者某些值该变时,才执行这个 effect.比如，当count改变是执行useEffect
useEffect(() => {
console.log(count)}, [count]);
-
不要在 render 中调用 effect； 不要在 effect 中更新 state，否则将无限循环的执行；
const UseEffectPage = () => {
const [count,setCount] = useState(0);
useEffect(() => {
setCount(count+1) // 不要在 render 中调用 effect
}, [count])
return (
<>
<div styles={
styles.root}>{
setCount(count+1)}</div> //不要在 effect 中更新 state
</>
)
}
Hooks规则
-
Hooks只在顶层调用，不要在循环，条件判断或者嵌套函数中调用钩子。 只在React的函数组件(function Component)中调用Hooks，在类组件(class Component)中无法使用。 对于自定义Hooks，使用use开头命名。 eslint-plugin-react-hooks该插件可以规范hooks写法。 React 靠的是 Hook 调用的顺序来对应state和useState，所以一定要注意。
