https://zh-hans.reactjs.org/docs/hooks-overview.html react官方文档
react hook主要分为state hook和effect hook.
1 state hook
和class组件里面的this.state类似,都是存储数据的地方,而且可以附上初始值.而且他同时提供了操作数据的行为.如下图,从官网上抄来的:
import React, { useState } from 'react';
function Example() {
// 声明一个叫 “count” 的 state 变量。
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
在这里我有一个疑问,如果一个页面初始化的数据很多,那么岂不是要写很多userState,先放着,以后再解决
ps: 淦,官网有解决方法,就是放个对象,但是不推荐使用
https://zh-hans.reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables
2 effect hook
官网说的也挺清楚地 , 我们用了函数组件,那么一些生命周期函数就使用不了了,他是componentDidMount,componentDidUpdate,componentWillUnmounted的集合,代码如下:
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// 相当于 componentDidMount 和 componentDidUpdate:
useEffect(() => {
// 使用浏览器的 API 更新页面标题
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
3 自定义hook
在我看来,这更是hook对函数式编程的体现,很像写一个共有的函数逻辑,给多个组件使用,只是在里面使用了useEffect和UserState.看代码
import React, { useState, useEffect } from 'react';
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
useEffect(() => {
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
return isOnline;
}
function FriendStatus(props) { const isOnline = useFriendStatus(props.friend.id); if (isOnline === null) { return 'Loading...'; } return isOnline ? 'Online' : 'Offline'; }
function FriendListItem(props) { const isOnline = useFriendStatus(props.friend.id); return ( <li style={{ color: isOnline ? 'green' : 'black' }}> {props.friend.name} </li> ); }
4 hook使用规则
在最外层调用,不要再条件判断或者函数里面使用.
