Hook是React 16.8的新增特性。它可以让你在不写class的情况下使用state以及其他特性
State Hook
import React, { useState } from 'react';
function HelloHooks() {
// 声明一个叫 “count” 的 state 变量。
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
在这里state就是一个hooks。通过函数组件调用它来给组件内部一个state。React在重复渲染的时候保留这个state。
useState 只需要一个参数，就是初始state。它会返回一对值：
- 当前的state
- 更新当前值的函数
声明多个state hook
function ExampleWithManyStates() {
// 声明多个 state 变量！
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
// ...
/* 数组结构写法并不属于hooks api。
* 当然也可以这样写
* const ageVariable = useState(42)
* const age = ageVariable[0];
* const setAge = ageVariable[1];
*/
}
Effect hook
Effecthook可以在函数式组件中执行副作用操作
useEffect hook可以看作class组件中的三个声明周期函数分别是
- componentDidMount
- componentDidUpdate
- componentWillUnmount
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return <>
<button onClick={() => setCount(count + 1)}><button />
</>
}
useEffect 没有任何参数的情况下就是 componentDidMount 与 componentDidUpdate的合成副作用
在react class组件中，经常会有这样的场景。在组件挂载(componentDidMount)的时候开启一个轮询任务或者状态订阅，通常会在组件卸载(componentWillUnmount)的时候去清除它。
class写法：
import React from 'react';
class demo extends React.Component {
state = {
dataSource: []
}
getList() {
// 获取数据
}
componentDidMount() {
this.getList()
this.timer = window.setInterval(() => {
this.getList()
}, 3000)
}
componentDidUnmount() {
window.clearInterval(this.timer);
}
render() {
// dom
}
}
function写法:
import React,{ useEffect, useState } from 'react';
function demo() {
let timer;
const [list, setList] = useState([]);
const getList = () => {
// 获取数据
}
// 第一次请求
useEffect(() => {
getList();
}, [])
// 30s后开始轮询
useEffect(() => {
timer = window.setInterval(() => {
getList();
}, 30000)
return () => window.clearInterval(timer); // 此处一定要return出一个
}, [])
return (
// <>dom</>
)
}
useEffect的可以接受2个参数
- 副作用执行的动作(函数)
- 触发副作用执行的依赖
- 当useEffect第二项为一个空数组时，初始化调用后便不再执行
- 当没有第二个参数时，组件挂载与任何state的更新都会触发副作用
- useEffect返回一个函数，在组件卸载时进行
- useEffect 第二个参数中有 state或者props，则state或props更新才会触发副作用
写完代码后控制台会报出这样的warning
每次渲染后，从React Hook Useffect内部对“timer”变量的指定将丢失。要随时间保留该值，请将其存储在useRef挂钩中，并将可变值保留在“.current”属性中。
修复此问题请参考React hooks之useRef。
