React Hooks 使用指南

阿新 • • 發佈：2020-11-26

一、元件類的缺點

React 的核心是元件。v16.8 版本之前，元件的標準寫法是類（class）。下面是一個簡單的元件類。

import React, { Component } from "react";

export default class Button extends Component {
  constructor() {
    super();
    this.state = { buttonText: "Click me, please" };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
     
this.setState(() => {
      return { buttonText: "Thanks, been clicked!" };
    });
  }
  render() {
    const { buttonText } = this.state;
    return <button onClick={this.handleClick}>{buttonText}</button>;
  }
}

這個元件類僅僅是一個按鈕，但可以看到，它的程式碼已經很"重"了。真實的 React App 由多個類按照層級，一層層構成，複雜度成倍增長。再加入 Redux，就變得更復雜。

Redux 的作者 Dan Abramov總結了元件類的幾個缺點：

大型元件很難拆分和重構，也很難測試。
業務邏輯分散在元件的各個方法之中，導致重複邏輯或關聯邏輯。
元件類引入了複雜的程式設計模式，比如 render props 和高階元件。

二、函式元件

React 團隊希望，元件不要變成複雜的容器，最好只是資料流的管道。開發者根據需要，組合管道即可。元件的最佳寫法應該是函式，而不是類。

React 早就支援函式元件，下面就是一個例子。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

但是，這種寫法有重大限制，必須是純函式，不能包含狀態，也不支援生命週期方法，因此無法取代類。

React Hooks 的設計目的，就是加強版函式元件，完全不使用"類"，就能寫出一個全功能的元件。

三、Hook 的含義

Hook 這個單詞的意思是"鉤子"。

React Hooks 的意思是，元件儘量寫成純函式，如果需要外部功能和副作用，就用鉤子把外部程式碼"鉤"進來。React Hooks 就是那些鉤子。

你需要什麼功能，就使用什麼鉤子。React 預設提供了一些常用鉤子，你也可以封裝自己的鉤子。

所有的鉤子都是為函式引入外部功能，所以 React 約定，鉤子一律使用use字首命名，便於識別。你要使用 xxx 功能，鉤子就命名為 usexxx。

下面介紹 React 預設提供的四個最常用的鉤子。

useState()
useContext()
useReducer()
useEffect()

四、useState()：狀態鉤子

useState()用於為函式元件引入狀態（state）。純函式不能有狀態，所以把狀態放在鉤子裡面。

本文前面那個元件類，使用者點選按鈕，會導致按鈕的文字改變，文字取決於使用者是否點選，這就是狀態。使用useState()重寫如下。

import React from "react";
import ReactDOM from "react-dom";

import Button from './button.js';
import "./styles.css";

function App() {
  return (
    <div className="App">
      <Button/>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

上面程式碼中，Button 元件是一個函式，內部使用useState()鉤子引入狀態。

useState()這個函式接受狀態的初始值，作為引數，上例的初始值為按鈕的文字。該函式返回一個數組，陣列的第一個成員是一個變數（上例是buttonText），指向狀態的當前值。第二個成員是一個函式，用來更新狀態，約定是set字首加上狀態的變數名（上例是setButtonText）。

注意事項1: 不可區域性更新

如果state是一個物件，能否部分setState？

答案是不行，因為setState不會幫我們合併屬性

那麼useReducer會合並屬性嗎？也不會！

因為React認為這應該是你自己要做的事情

function App(){
    const [user, setUser] = React.useState({name: 'Jack', age: 18})
    const onClick = () =>{
        //setUser不可以區域性更新，如果只改變其中一個，那麼整個資料都會被覆蓋
        // setUser({
        //  name: 'Frank'
        // })
        setUser({
            ...user, //拷貝之前的所有屬性
            name: 'Frank' //這裡的name覆蓋之前的name
        })
    }
    return (
        <div className='App'>
            <h1>{user.name}</h1>
            <h2>{user.age}</h2>
            <button onClick={onClick}>Click</button>
        </div>
    )
}

注意事項2: 地址要變

setState(obj) 如果obj地址不變，那麼React就認為資料沒有變化，不會更新檢視

useState接受函式

const [state, setState] = useState(() => {return initialState})

//該函式返回初始state，且只執行一次

setState接受函式

setN(i => i + 1)

//如果你能接受這種形式，應該優先使用這種形式

五、useContext()：共享狀態鉤子

如果需要在元件之間共享狀態，可以使用useContext()。

現在有兩個元件 Navbar 和 Messages，我們希望它們之間共享狀態。

<div className="App">
  <Navbar/>
  <Messages/>
</div>

第一步就是使用 React Context API，在元件外部建立一個 Context。

const AppContext = React.createContext({});

元件封裝程式碼如下。

<AppContext.Provider value={{
  username: 'superawesome'
}}>
  <div className="App">
    <Navbar/>
    <Messages/>
  </div>
</AppContext.Provider>

上面程式碼中，AppContext.Provider提供了一個 Context 物件，這個物件可以被子元件共享。

Navbar 元件的程式碼如下。

const Navbar = () => {
  const { username } = useContext(AppContext);
  return (
    <div className="navbar">
      <p>AwesomeSite</p>
      <p>{username}</p>
    </div>
  );
}

上面程式碼中，useContext()鉤子函式用來引入 Context 物件，從中獲取username屬性。

Message 元件的程式碼也類似。

const Messages = () => {
  const { username } = useContext(AppContext)

  return (
    <div className="messages">
      <h1>Messages</h1>
      <p>1 message for {username}</p>
      <p className="message">useContext is awesome!</p>
    </div>
  )
}

程式碼總覽：

一、使用AppContext= createContext(initial) 建立上下文

二、使用 <AppContext.Provider> 圈定作用域

三、在作用域內使用 useContext(AppContext)來使用上下文

import React, { useContext } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const AppContext = React.createContext({});

const Navbar = () => {
  const { username } = useContext(AppContext)

  return (
    <div className="navbar">
      <p>AwesomeSite</p>
      <p>{username}</p>
    </div>
  )
}

const Messages = () => {
  const { username } = useContext(AppContext)

  return (
    <div className="messages">
      <h1>Messages</h1>
      <p>1 message for {username}</p>
      <p className="message">useContext is awesome!</p>
    </div>
  )
}

function App() {
  return (
    <AppContext.Provider value={{
      username: 'superawesome'
    }}>
      <div className="App">
        <Navbar />
        <Messages />
      </div>
    </AppContext.Provider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

六、useReducer()：action 鉤子

React 本身不提供狀態管理功能，通常需要使用外部庫。這方面最常用的庫是 Redux。

Redux 的核心概念是，元件發出 action 與狀態管理器通訊。狀態管理器收到 action 以後，使用 Reducer 函式算出新的狀態，Reducer 函式的形式是(state, action) => newState。

useReducers()鉤子用來引入 Reducer 功能。

const [state, dispatch] = useReducer(reducer, initialState);

上面是useReducer()的基本用法，它接受 Reducer 函式和狀態的初始值作為引數，返回一個數組。陣列的第一個成員是狀態的當前值，第二個成員是傳送 action 的dispatch函式。

下面是一個計數器的例子。用於計算狀態的 Reducer 函式如下。

const myReducer = (state, action) => {
  switch(action.type)  {
    case('countUp'):
      return  {
        ...state,
        count: state.count + 1
      }
    default:
      return  state;
  }
}

元件程式碼如下。

function App() {
  const [state, dispatch] = useReducer(myReducer, { count:   0 });
  return  (
    <div className="App">
      <button onClick={() => dispatch({ type: 'countUp' })}>
        +1
      </button>
      <p>Count: {state.count}</p>
    </div>
  );
}

程式碼總覽：

看程式碼，分四步走

一、建立初始值initialState ({ count: 0 })

二、建立所有操作reducer(state, action);

三、傳給userReducer，得到讀和寫API

四、呼叫寫({type: '操作型別'})

總的來說，useReducer 是 useState 的複雜版

import React, { useReducer } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const myReducer = (state, action) => {
  switch(action.type) {
    case('countUp'):
      return {
        ...state,
        count: state.count + 1
      }
    default:
      return state
  }
}

function App() {
  const [state, dispatch] = useReducer(myReducer, { count: 0 })

  return (
    <div className="App">
      <button onClick={() => dispatch({ type: 'countUp' })}>
        +1
      </button>
      <p>Count: {state.count}</p>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

如何代替 Redux

步驟

一、將資料集中在一個 store 物件

二、將所有操作集中在 reducer

三、建立一個 Context

四、建立對資料的讀取 API

五、將第四步的內容放到第三步的 Context

六、用 Context.Provider 將 Context 提供給所有元件

七、各個元件用 useContext 獲取讀寫API

import React, { useReducer, useContext, useEffect } from "react";
import ReactDOM from "react-dom";

const store = {
    user: null,
    books: null,
    movies: null
};

function reducer(state, action) {
    switch (action.type) {
        case "setUser":
            return { ...state, user: action.user };
        case "setBooks":
            return { ...state, books: action.books };
        case "setMovies":
            return { ...state, movies: action.movies };
        default:
            throw new Error();
    }
}

const Context = React.createContext(null);

function App() {
    const [state, dispatch] = useReducer(reducer, store);

    const api = { state, dispatch };
    return (
        <Context.Provider value={api}>
            <User />
            <hr />
            <Books />
            <Movies />
        </Context.Provider>
    );
}

function User() {
    const { state, dispatch } = useContext(Context);
    useEffect(() => {
        ajax("/user").then(user => {
            dispatch({ type: "setUser", user: user });
        });
    }, []);
    return (
        <div>
            <h1>個人資訊</h1>
            <div>name: {state.user ? state.user.name : ""}</div>
        </div>
    );
}

function Books() {
    const { state, dispatch } = useContext(Context);
    useEffect(() => {
        ajax("/books").then(books => {
            dispatch({ type: "setBooks", books: books });
        });
    }, []);
    return (
        <div>
            <h1>我的書籍</h1>
            <ol>
                {state.books ? state.books.map(book => <li key={book.id}>{book.name}</li>) : "載入中"}
            </ol>
        </div>
    );
}

function Movies() {
    const { state, dispatch } = useContext(Context);
    useEffect(() => {
        ajax("/movies").then(movies => {
            dispatch({ type: "setMovies", movies: movies });
        });
    }, []);
    return (
        <div>
            <h1>我的電影</h1>
            <ol>
                {state.movies
                    ? state.movies.map(movie => <li key={movie.id}>{movie.name}</li>)
                    : "載入中"}
            </ol>
        </div>
    );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

// 幫助函式

// 假 ajax
// 兩秒鐘後，根據 path 返回一個物件，必定成功不會失敗
function ajax(path) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (path === "/user") {
                resolve({
                    id: 1,
                    name: "Frank"
                });
            } else if (path === "/books") {
                resolve([
                    {
                        id: 1,
                        name: "JavaScript 高階程式設計"
                    },
                    {
                        id: 2,
                        name: "JavaScript 精粹"
                    }
                ]);
            } else if (path === "/movies") {
                resolve([
                    {
                        id: 1,
                        name: "愛在黎明破曉前"
                    },
                    {
                        id: 2,
                        name: "戀戀筆記本"
                    }
                ]);
            }
        }, 2000);
    });
}

由於 Hooks 可以提供共享狀態和 Reducer 函式，所以它在這些方面可以取代 Redux。但是，它沒法提供中介軟體（middleware）和時間旅行（time travel），如果你需要這兩個功能，還是要用 Redux。

七、useEffect()：副作用鉤子

useEffect()用來引入具有副作用的操作，最常見的就是向伺服器請求資料。以前，放在componentDidMount裡面的程式碼，現在可以放在useEffect()。

useEffect()的用法如下。

1、作為 componentDidMount 使用，[ ] 作第二個引數

2、作為 componentDidUpdate 使用，可指定依賴

3、作為 componentWillUnmount 使用，通過 return

4、以上三種用途可同時存在

useEffect(()  =>  {
  // Async Action
}, [dependencies])

上面用法中，useEffect()接受兩個引數。第一個引數是一個函式，非同步操作的程式碼放在裡面。第二個引數是一個數組，用於給出 Effect 的依賴項，只要這個陣列發生變化，useEffect()就會執行。第二個引數可以省略，這時每次元件渲染時，就會執行useEffect()。

下面看一個例子。

const Person = ({ personId }) => {
  const [loading, setLoading] = useState(true);
  const [person, setPerson] = useState({});

  useEffect(() => {
    setLoading(true); 
    fetch(`https://swapi.co/api/people/${personId}/`)
      .then(response => response.json())
      .then(data => {
        setPerson(data);
        setLoading(false);
      });
  }, [personId])

  if (loading === true) {
    return <p>Loading ...</p>
  }

  return <div>
    <p>You're viewing: {person.name}</p>
    <p>Height: {person.height}</p>
    <p>Mass: {person.mass}</p>
  </div>
}

上面程式碼中，每當元件引數personId發生變化，useEffect()就會執行。元件第一次渲染時，useEffect()也會執行。如果同時存在多個 useEffect，會按照出現次序執行。

程式碼總覽

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const Person = ({ personId }) => {
  const [loading, setLoading] = useState(true);
  const [person, setPerson] = useState({});

  useEffect(() => {
    setLoading(true);
    fetch(`https://swapi.co/api/people/${personId}/`)
      .then(response => response.json())
      .then(data => {
        setPerson(data);
        setLoading(false);
      });
  }, [personId]);

  if (loading === true) {
    return <p>Loading ...</p>;
  }

  return (
    <div>
      <p>You're viewing: {person.name}</p>
      <p>Height: {person.height}</p>
      <p>Mass: {person.mass}</p>
    </div>
  );
};

function App() {
  const [show, setShow] = useState("1");

  return (
    <div className="App">
      <Person personId={show} />
      <div>
        Show:
        <button onClick={() => setShow("1")}>Luke</button>
        <button onClick={() => setShow("2")}>C-3PO</button>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

八、useLayoutEffect（佈局副作用）

useEffect 在瀏覽器渲染完成後執行

useLayoutEffect 在瀏覽器渲染前執行

function App1() {
    const [n, setN] = useState(0)
    const time = useRef(null)
    const onClick = () => {
        setN(i => i + 1)
        time.current = performance.now()
    }
    useLayoutEffect(() => {
        if (time.current) {
            console.log(performance.now() - time.current) //大概是0.7ms
        }
    })
    useEffect(() => {
        if (time.current) {
            console.log(performance.now() - time.current) //大概是2.7ms
        }
    })
    return (
        <div className="App">
            <h1>n: {n}</h1>
            <button onClick={onClick}>Click</button>
        </div>
    );
}

useLayoutEffect 總比 useEffect 先執行

useLayoutEffect 裡的任務最好影響了 Layout

/* useLayoutEffect比useEffect先執行 */
function App2() {
    const [n, setN] = useState(0)
    const onClick = () => {
        setN(i => i + 1)
    }
    //執行順序打印出 2、3、1
    useEffect(() => {
        console.log(1)
    })
    useLayoutEffect(() => {
        console.log(2)
    })
    useLayoutEffect(() => {
        console.log(3)
    })
    return (
        <div className="App">
            <h1>n: {n}</h1>
            <button onClick={onClick}>Click</button>
        </div>
    );
}

為了使用者體驗，優先使用 useEffect (優先渲染)

九、useMemo

需要先講 React.memo，React預設有多餘的render

function App() {
    const [n, setN] = React.useState(0);
    const [m, setM] = React.useState(0);
    const onClick = () => {
        setN(n + 1);
    };

    return (
        <div className="App">
            <div>
                {/*點選button會重新執行Child元件*/}
                <button onClick={onClick}>update n {n}</button>
            </div>
            <Child data={m}/>
            {/* <Child2 data={m}/> */}
        </div>
    );
}

function Child(props) {
    console.log("child 執行了");
    console.log('假設這裡有大量程式碼')
    return <div>child: {props.data}</div>;
}

const Child2 = React.memo(Child);

將程式碼中的 Child 用React.memo(Child) 代替

如果 props 不變，就沒有必要再次執行一個函式元件

最終程式碼：

function App() {
    const [n, setN] = React.useState(0);
    const [m, setM] = React.useState(0);
    const onClick = () => {
        setN(n + 1);
    };

    return (
        <div className="App">
            <div>
                {/*點選button會重新執行Child元件*/}
                <button onClick={onClick}>update n {n}</button>
            </div>
            <Child data={m}/>
        </div>
    );
}

const Child = React.memo(props => {
        console.log("child 執行了");
        console.log('假設這裡有大量程式碼')
        return <div>child: {props.data}</div>;
});

但是

這玩意有一個bug

添加了監聽函式之後，一秒破功因為 App 執行時，會再次執行 onClickChild，生成新的函式

新舊函式雖然功能一樣，但是地址引用不一樣！

function App() {
    const [n, setN] = React.useState(0);
    const [m, setM] = React.useState(0);
    const onClick = () => {
        setN(n + 1);
    };
    const onClickChild = () => {}
    return (
        <div className="App">
            <div>
                {/*點選button會重新執行Child元件*/}
                <button onClick={onClick}>update n {n}</button>
            </div>
            {/*但是如果傳了一個引用，則React.memo無效。因為引用是不相等的*/}
            <Child data={m} onClick={onClickChild}/>
        </div>
    );
}

//使用React.memo可以解決重新執行Child元件的問題
const Child = React.memo(props => {
        console.log("child 執行了");
        console.log('假設這裡有大量程式碼')
        return <div onClick={props.onClick}>child: {props.data}</div>;
});

怎麼辦？用useMemo：

function App() {
    const [n, setN] = React.useState(0);
    const [m, setM] = React.useState(0);
    const onClick = () => {
        setN(n + 1);
    };
    const onClick1 = () => {
        setM(m + 1);
    };
    const onClickChild = () => {}
    const onClickChild1 = useMemo(() => {
        return () => {
            console.log(`on click child m: ${m}`)
        }
    }, [m])
    return (
        <div className="App">
            <div>
                {/*點選button會重新執行Child元件*/}
                <button onClick={onClick}>update n {n}</button>
                <button onClick={onClick1}>update m {m}</button>
            </div>
            {/*但是如果傳了一個引用，則React.memo無效。因為引用是不相等的*/}
            {/*<Child data={m} onClick={onClickChild}/>*/}
            {/*onClickChild1使用useMemo可以消除此bug*/}
            <Child data={m} onClick={onClickChild1}/>
        </div>
    );
}

//使用React.memo可以解決重新執行Child元件的問題
const Child = React.memo(props => {
        console.log("child 執行了");
        console.log('假設這裡有大量程式碼')
        return <div onClick={props.onClick}>child: {props.data}</div>;
});

useMemo特點：

第一個引數是 () => value
第二個引數是依賴 [m, n]
只有當依賴變化時，才會計算出新的 value
如果依賴不變，那麼就重用之前的 value
這不就是 Vue 2的 computed 嗎？

注意：

如果你的 value 是一個函式，那麼你就要寫成useMemo(() => x => console.log(x))
這是一個返回函式的函式
是不是很難用？於是就有了useCallback

useCallback用法：

useCallback(x => console.log(x), [m]) 等價於

useMemo( () => x => console.log(x), [m])

useRef：

可以用來引用 DOM 物件
也可以用來引用普通物件

而useRef這個hooks函式，除了傳統的用法之外，它還可以“跨渲染週期”儲存資料。

傳統用法：

import React, { useState, useEffect, useMemo, useRef } from 'react';

export default function App(props){
  const [count, setCount] = useState(0);

  const doubleCount = useMemo(() => {
    return 2 * count;
  }, [count]);

  const couterRef = useRef();

  useEffect(() => {
    document.title = `The value is ${count}`;
    console.log(couterRef.current);
  }, [count]);
  
  return (
    <>
      <button ref={couterRef} onClick={() => {setCount(count + 1)}}>Count: {count}, double: {doubleCount}</button>
    </>
  );
}

程式碼中用useRef建立了couterRef物件，並將其賦給了button的ref屬性。這樣，通過訪問couterRef.current就可以訪問到button對應的DOM物件。

然後再來看看它儲存資料的用法。

在一個元件中有什麼東西可以跨渲染週期，也就是在元件被多次渲染之後依舊不變的屬性？第一個想到的應該是state。沒錯，一個元件的state可以在多次渲染之後依舊不變。但是，state的問題在於一旦修改了它就會造成元件的重新渲染。

那麼這個時候就可以使用useRef來跨越渲染週期儲存資料，而且對它修改也不會引起元件渲染。

import React, { useState, useEffect, useMemo, useRef } from 'react';

export default function App(props){
  const [count, setCount] = useState(0);

  const doubleCount = useMemo(() => {
    return 2 * count;
  }, [count]);

  const timerID = useRef();
  
  useEffect(() => {
    timerID.current = setInterval(()=>{
        setCount(count => count + 1);
    }, 1000); 
  }, []);
  
  useEffect(()=>{
      if(count > 10){
          clearInterval(timerID.current);
      }
  });
  
  return (
    <>
      <button ref={couterRef} onClick={() => {setCount(count + 1)}}>Count: {count}, double: {doubleCount}</button>
    </>
  );
}

在上面的例子中，我用ref物件的current屬性來儲存定時器的ID，這樣便可以在多次渲染之後依舊儲存定時器ID，從而能正常清除定時器。

forwardRef：

props 無法傳遞 ref 屬性

function App(){
    const buttonRef = useRef(null)
    return (
        <div>
            <Button ref={buttonRef}>按鈕</Button>
            {/* 控制檯報錯:
                    Warning: Function components cannot be given refs.
                  Attempts to access this ref will fail.
                  Did you mean to use React.forwardRef()?
              */}
        </div>
    )
}

const Button = (props) => {
    console.log(props) // {ref: undefined, children: "按鈕"}
    return <button {...props} />
}

實現 ref 的傳遞：由於 props 不包含 ref，所以需要 forwardRef

import React, {forwardRef, useRef} from 'react';

function App(){
    const buttonRef = useRef(null)
    return (
        <div>
            <Button ref={buttonRef}>按鈕</Button2>
        </div>
    )
}
const Button = forwardRef((props, ref) => {
    console.log(ref)  //可以拿到ref對button的引用，forwardRef僅限於函式元件，class 元件是預設可以使用 ref 的
    return <button ref={ref} {...props} />;
})

十、建立自己的 Hooks

上例的 Hooks 程式碼還可以封裝起來，變成一個自定義的 Hook，便於共享。

const usePerson = (personId) => {
  const [loading, setLoading] = useState(true);
  const [person, setPerson] = useState({});
  useEffect(() => {
    setLoading(true);
    fetch(`https://swapi.co/api/people/${personId}/`)
      .then(response => response.json())
      .then(data => {
        setPerson(data);
        setLoading(false);
      });
  }, [personId]);  
  return [loading, person];
};

上面程式碼中，usePerson()就是一個自定義的 Hook。

Person 元件就改用這個新的鉤子，引入封裝的邏輯。

const Person = ({ personId }) => {
  const [loading, person] = usePerson(personId);

  if (loading === true) {
    return <p>Loading ...</p>;
  }

  return (
    <div>
      <p>You're viewing: {person.name}</p>
      <p>Height: {person.height}</p>
      <p>Mass: {person.mass}</p>
    </div>
  );
};

程式碼總覽：

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const usePerson = personId => {
  const [loading, setLoading] = useState(true);
  const [person, setPerson] = useState({});
  useEffect(() => {
    setLoading(true);
    fetch(`https://swapi.co/api/people/${personId}/`)
      .then(response => response.json())
      .then(data => {
        setPerson(data);
        setLoading(false);
      });
  }, [personId]);
  return [loading, person];
};

const Person = ({ personId }) => {
  const [loading, person] = usePerson(personId);

  if (loading === true) {
    return <p>Loading ...</p>;
  }

  return (
    <div>
      <p>You're viewing: {person.name}</p>
      <p>Height: {person.height}</p>
      <p>Mass: {person.mass}</p>
    </div>
  );
};

function App() {
  const [show, setShow] = useState("1");

  return (
    <div className="App">
      <Person personId={show} />
      <div>
        Show:
        <button onClick={() => setShow("1")}>Luke</button>
        <button onClick={() => setShow("2")}>C-3PO</button>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

貼心例子：

// useList.js
import {useState, useEffect} from 'react'

const useList = () => {
    const [list, setList] = useState(null)
    useEffect(() => {
        ajax().then(list => {
            setList(list)
        })
    }, []) //確保只在第一次執行
    return {
        list,
        addItem: name => {
            setList([...list, {id: Math.random(), name}])
        },
        deleteIndex: index => {
            setList(list.slice(0, index).concat(list.slice(index + 1)))
        }
    }
}
export default useList

function ajax(){
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve([
                {id: 1, name: 'Frank'},
                {id: 2, name: 'Jack'},
                {id: 3, name: 'Alice'},
                {id: 4, name: 'Bob'},
                {id: 5, name: 'Han'}
            ])
        }, 1000)
    })
}

//index.js
import useList from './hooks/useList'

function App() {
    const {list, deleteIndex} = useList()
    return (
        <div>
            <h1>List</h1>
            {
                list ? (
                    <ol>
                        {
                            list.map((item,index) => {
                                return (
                                    <li key={item.id}>
                                        {item.name}
                                        <button
                                            onClick={() => {
                                                deleteIndex(index);
                                            }}
                                        >
                                            x
                                        </button>
                                    </li>
                                )
                            })
                        }
                    </ol>
                ) : (
                    '載入中...'
                )
            }
        </div>
    )
}

參考連結：

http://www.ruanyifeng.com/blog/2019/09/react-hooks.html

https://www.jianshu.com/p/1252be39c702

React Hooks 使用指南

一、元件類的缺點

二、函式元件

三、Hook 的含義

四、useState()：狀態鉤子

五、useContext()：共享狀態鉤子

六、useReducer()：action 鉤子

七、useEffect()：副作用鉤子

八、useLayoutEffect（佈局副作用）

九、useMemo

十、建立自己的 Hooks

React Hooks 使用指南

不要再問React Hooks能否取代 Redux 了

React Hooks 實現和由來以及解決的問題詳解

關於 React Hooks 的 useState 的原理解析

實現 React Hooks

React Hooks之useState、useEffect使用

React Hooks 學習筆記

你真的理解 React Hooks 嗎

React Hooks 全解（二）

react hooks 點選空白區域隱藏元件

React Hooks: everything you need to know! 🚀（譯）

詳解如何使用React Hooks請求資料並渲染

react hooks系列之useRef

React-Hooks

React Hooks 你真的用對了嗎？

React Hooks --- useState 和 useEffect

TypeScript and React: Hooks

React Hooks 原理

如何使用React Hooks將React類元件轉換為功能元件

什麼是react hooks

React Hooks 使用指南

一、元件類的缺點

二、函式元件

三、Hook 的含義

四、useState()：狀態鉤子

五、useContext()：共享狀態鉤子

六、useReducer()：action 鉤子

七、useEffect()：副作用鉤子

八、useLayoutEffect（佈局副作用）

九、useMemo

十、建立自己的 Hooks

相關推薦