記錄 React Hooks 學習

動機、解決了什麼問題

1. State Hook 簡單來講 組件分爲三種、無狀態組建能夠經過function 編寫、可是有了 hooks ，能夠很輕易的寫出帶狀態的組件
2. Effect Hook 可讓你在函數組件中執行一些具備effect（反作用）的操做;每次render以後都會執行effect至關於DidMonut 和 DidUpdate,若是須要對指定的參數進行監聽,能夠在useEffect的 參數 2 傳入一個 state

特別注意事項：hooks 是函數，因此 JS 函數有的閉包問題，hooks 中也會發生、因此須要合理規避閉包陷

useState

import React, { useState } from "react";

const Counter = props => {
  const [count, setCount] = useState(0); // count 狀態變量 setCount set函數 useState(0);//使用hooks狀態
  // 0 count 默認值
  const [num, setNum] = useState(0);

  return (
    <div> <article> {/* 不能使用count + 1 ，會報錯count 是隻讀 */} <button onClick={() => setCount(count - 1)}>--</button> <span>count:{count}</span> <button onClick={() => setCount(count + 1)}>++</button> </article> </div>
  );
};
複製代碼

memo

//哪怕 並無更新 也會觸發子組件從新渲染 因此須要 memo 來緩存
import React, { useState, memo } from "react";

const Counter = props => {
  const [count, setCount] = useState(0);
  const [num, setNum] = useState(100);

  return (
    <div> <span>useState</span> <Child name={"child render test"} /> <article> {/* 不要寫成count ++ 會報錯 count is read-only */} <button onClick={() => setCount(count - 1)}>--</button> <span>count:{count}</span> <button onClick={() => setCount(count + 1)}>++</button> </article> <article> <button onClick={() => setNum(num - 1)}>--</button> <span>num:{num}</span> <button onClick={() => setNum(num + 1)}>++</button> </article> </div> ); }; export default Counter; const Child = memo(props => { console.log("child Render"); const [state, setState] = useState(1); return ( <div> {props.name} {state} </div> ); }); 複製代碼

useEffect

import React, { useState, useEffect } from "react";

const EffectCom = prop => {
  const [title, setTitle] = useState("defaultTitle");

  // 在`DidMount` 和 `DidUpdate` 以後都會執行，若是須要對指定的參數進行監聽,能夠在`useEffect`的 參數2 傳入一個 `state`, but 、傳入監聽參數、也會只當相似`Didmount`的事件
  useEffect(eff => {
    console.log(eff);
    document.title = title;
  }, title);

  console.log(title);
  return (
    <div> <span>Effect Hook</span> <article> <p>title:{title}</p> </article> </div>
  );
};

export default EffectCom;
複製代碼

useCallback

// 在函數組件中 若是數據變化、會引發數據從新渲染、因此須要使用到 `useCallback` 來解決這種問題

import React, { useState, useEffect, useCallback } from "react";

const EffectCom = prop => {
  const [title, setTitle] = useState("defaultTitle");
  const [state, setState] = useState(1);
  useEffect(
    eff => {
      console.log("useEffect");
      document.title = title;
    },
    [state]
  );

  const changeTitle = () => {
    setState(state + 1);
    setTitle("changeTitle::" + state);
  };
  //每次都執行了，說明有閉包調用問題、每次hello函數都會被從新聲明，這是有問題的，須要緩存起來，在特定的時候才須要更新
  console.log("hello");
  // const hello = () => {
  // console.log("hello");
  // };

  // 有了這樣一層、 hello 函數並不會在每次都從新聲明來佔用內存，而是在state 變化的時候才從新聲明，能夠節約內存
  const hello = useCallback(() => {
    console.log("hello");
  }, [state]);

  console.log(title);
  return (
    <div> <span>Effect Hook</span> <article> <p onClick={hello}>title:{title}</p> <button onClick={changeTitle}>changeTitle</button> </article> </div>
  );
};

export default EffectCom;
複製代碼

若是bug、理解有誤、用詞不當，歡迎指出

第一次發掘金，但願能和你們一塊兒學習，一塊兒進步

示例代碼地址