react中hook即为钩子函数，react 16.8以上版本方可使用，为了解决函数式组件，不能像基于类的组件一样，可以使用state以及React的其他特性。
一、useState
首先，我们先说下什么时候使用useState。如果你编写函数组件，并且需要向其添加state。在有hook之前，你需要将它转变成class组件。但现在你可以使用useState。下面例子一个为计时器和input操作state的例子
import React, { useState, useEffect } from "react";
export default function HookTest() {
// useState(initState)
const [count, setCount] = useState(0);
const [fruit, setFruit] = useState("banana");
const [input, setInput] = useState("");
const [fruits, setFruits] = useState(["apple", "banana"]);
return (
<div>
<p>点击了{count}次</p>
<button onClick={() => setCount(count + 1)}>点击</button>
<p>年龄：{age ? age : 'loading...'}</p>
<p>选择的水果：{fruit}</p>
<p>
<input
type="text"
value={input}
onChange={e => setInput(e.target.value)}
/>
<button onClick={() => setFruits([...fruits, input])}>新增水果</button>
</p>
<ul>
{fruits.map(f => (
<li key={f} onClick={() => setFruit(f)}>
{f}
</li>
))}-
</ul>
</div>
);
}
- useState的参数为初始state。可以是数字，字符串，也可以是对象
- useState的返回值为一个数组，数组的第一个值是当前state名称，第二个是是更新state的函数。
因此其使用方法为
const [count,setCount]=useState(0)
副作用hook useEffect.
使用上面计时器的例子，如果想要每次数目count改变时，页面的title也有变化。在基于类的组件中的写法,在生命周期函数componentDidMount和componentDidUpdate中写
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
componentDidMount() {
document.title = `You clicked ${this.state.count} times`;
}
componentDidUpdate() {
document.title = `You clicked ${this.state.count} times`;
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
这样写的话，在更新和组件加载都需要调用相同的函数，有没有一种方法，可以在每次渲染的时候执行呢。在基于class的组件中没有提供，不过我们可以使用钩子函数useEffect来实现哦。看下面例子。
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
},[count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
- useEffect在每次渲染的时候，就会运行。不需要考虑挂载和更新。
- useEffect 第一个参数为每次渲染完成执行的函数。第二次参数是一个数组。可以用来监听某个状态的变化，只有状态改变才会执行useEffect总的一个函数。当传入一个空数组[]，则代表只是执行一次。
useEffect(() => {
document.title = `You clicked ${count} times`;
},[count]);
- 如果useE ffect的执行函数，返回一个函数,React则会在执行清除操作（组件卸载）时调用它
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
// Specify how to clean up after this effect:
return function cleanup() {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
什么时候需要执行清楚副作用操作呢？当有订阅时，需要执行清除操作，避免内存泄漏。
自定义hook
当我们在2个函数之间共享逻辑时，我们可以提取到第三个函数中。自定义hook时一个函数，其名称以use开头，在内部可以调用其他的hook函数。例如：在一个app中，需要在多个组件中知道用户的登陆状态，这个时候就可以把登陆状态的函数。写成一个hook，在多个组件中调用.
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
// ...
return isOnline;
}
useFriendStatus函数式一个hook函数，可以返回当前用户的登陆状态。从而得到复用。
在其他组件中直接使用
const isOnline = useFriendStatus(props.friend.id);
网友评论