周五看见React v16.7.0-alpha Hooks,今早起来看见圈里已经刷屏了Hooks,正好周末,正好IG和G2的比赛还没开始,研究下。。。
刚刚接触react时候非常喜欢用函数式组件,因为太简洁了写起来非常快,然后然后。。写到后面发现很多自己以前写的组件需要改。。为什么呢,因为自己当时写的时候考虑的不周到,后期发现很多地方都需要生命周期和状态来进行渲染优化,然后就是大量修改函数式为classComponent。所以现在起手一般都是classComponent,只有极简单的组件用函数式比如列表item啥的。
现在有了Hooks,“Hooks” 本意是”钩子“的意思。在 React 里,hooks 就是一系列特殊的函数,使函数组件 (functional component) 内部能够”钩住“ React 内部的 state 和 life-cycles。
✌️ Rules of Hooks
- 只能在顶层调用Hooks 。不要在循环,条件或嵌套函数中调用Hook
- 只能在functional component中使用
? State Hook
- 即在函数式中使用state
import { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
//const [age, setAge] = useState(42);
//const [fruit, setFruit] = useState('banana');
//const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useState
的参数就是以前state的初始值。useState
返回的值中第一个参数是以前的state,第二个参数是setState,不过以前我们只有一个state,现在可以自由命名,更直观了,比如上面的age
和setAge
,fruit
和setFruit
⚡️ Effect Hook
- effect Hook使我们可以使用生命周期了
function FriendStatusWithCounter(props) {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
// ...
- 每当 React更新之后,就会触发 useEffect(在第一次 render 和每次 update 后触发)。
? Custom Hooks
- 有时,我们希望在组件之间重用一些有状态逻辑。
- 首先,我们将这个逻辑写到useFriendStatus:返回朋友在线的状态
isOnline
import { 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 FriendListItem(props) {
const isOnline = useFriendStatus(props.friend.id);
return (
<li style={{ color: isOnline ? 'green' : 'black' }}>
{props.friend.name}
</li>
);
}
? Other Hooks
- 你可能会发现一些不太常用的内置Hook很有用。
- useContext:
function Example() {
const locale = useContext(LocaleContext);
const theme = useContext(ThemeContext);
// ...
}
- useReducer
function Todos() {
const [todos, dispatch] = useReducer(todosReducer);
// ...
总结
以后可以更愉快的写functional component了???
参考
预言
等下比赛IG应该可以3:2拿下,为啥是3,因为想多看几场呀
最后
大家好,这里是「 TaoLand 」,这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客,希望和大家多多交流,一起成长!文章将会在下列地址同步更新……
个人博客:www.yangyuetao.cn
小程序:TaoLand