新玩具，React v16.7.0-alpha Hooks_综合

周五看见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了???

参考

react官方Hooks简介
Hooks例子

预言

等下比赛IG应该可以3：2拿下，为啥是3，因为想多看几场呀

最后

大家好，这里是「 TaoLand 」，这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客，希望和大家多多交流，一起成长！文章将会在下列地址同步更新……
个人博客：www.yangyuetao.cn
小程序：TaoLand