周五看見React v16.7.0-alpha Hooks，今早起來看見圈里已經(jīng)刷屏了Hooks，正好周末，正好IG和G2的比賽還沒開始，研究下。。。

剛剛接觸react時候非常喜歡用函數(shù)式組件，因為太簡潔了寫起來非?？?，然后然后。。寫到后面發(fā)現(xiàn)很多自己以前寫的組件需要改。。為什么呢，因為自己當(dāng)時寫的時候考慮的不周到，后期發(fā)現(xiàn)很多地方都需要生命周期和狀態(tài)來進行渲染優(yōu)化，然后就是大量修改函數(shù)式為classComponent。所以現(xiàn)在起手一般都是classComponent，只有極簡單的組件用函數(shù)式比如列表item啥的。

現(xiàn)在有了Hooks,"Hooks" 本意是”鉤子“的意思。在 React 里，hooks 就是一系列特殊的函數(shù)，使函數(shù)組件 (functional component) 內(nèi)部能夠”鉤住“ React 內(nèi)部的 state 和 life-cycles。

?? Rules of Hooks

• 只能在頂層調(diào)用Hooks 。不要在循環(huán)，條件或嵌套函數(shù)中調(diào)用Hook
• 只能在functional component中使用

?? State Hook

• 即在函數(shù)式中使用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的參數(shù)就是以前state的初始值。
• useState返回的值中第一個參數(shù)是以前的state,第二個參數(shù)是setState,不過以前我們只有一個state,現(xiàn)在可以自由命名，更直觀了，比如上面的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);
  }
  // ...

• 每當(dāng) React更新之后，就會觸發(fā) useEffect（在第一次 render 和每次 update 后觸發(fā)）。

?? Custom Hooks

• 有時，我們希望在組件之間重用一些有狀態(tài)邏輯。
• 首先，我們將這個邏輯寫到useFriendStatus：返回朋友在線的狀態(tài)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

• 你可能會發(fā)現(xiàn)一些不太常用的內(nèi)置Hook很有用。
• useContext：

function Example() {
  const locale = useContext(LocaleContext);
  const theme = useContext(ThemeContext);
  // ...
}

• useReducer

function Todos() {
  const [todos, dispatch] = useReducer(todosReducer);
  // ...

總結(jié)

以后可以更愉快的寫functional component了:smiley::smiley::smiley:

參考

react官方Hooks簡介
Hooks例子

預(yù)言

等下比賽IG應(yīng)該可以3：2拿下，為啥是3，因為想多看幾場呀

最后

大家好，這里是「 TaoLand 」，這個博客主要用于記錄一個菜鳥程序猿的Growth之路。這也是自己第一次做博客，希望和大家多多交流，一起成長！文章將會在下列地址同步更新……
個人博客：www.yangyuetao.cn
小程序：TaoLand