hooks寫React組件要注意哪些細節

今天小編給大家分享一下hooks寫React組件要注意哪些細節的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

01.不需要render的場景下使用useState

在函數組件中我們可以使用useState來管理狀態，這使得對狀態的管理變得很簡單，但是也容易被濫用，我們通過下面的代碼樣例看下容易忽略的地方。

不推薦×

function ClickButton(props){
  const [count, setCount] = useState(0)
  const onClickCount = () => {
    setCount((c) => c + 1)
  }
  const onClickRequest = () => {
    apiCall(count)
  }
  return (
    <div>
      <button onClick={onClickCount}>Click</button>
      <button onClick={onClickRequest}>Submit</button>
    </div>
  )
}

問題所在：仔細看上面的代碼，乍一看其實也沒什么問題，點擊按鈕更新 count。但是問題也就出在這里，我們的 return 部分并沒有用到 count 狀態，而每次 setCount 都會使組件重新渲染一次，而這個渲染并不是我們需要的，多出來的渲染會使得頁面的性能變差，因此我們可以改造一下代碼，如下代碼：

推薦√如果我們只是單純的想要一個能在組件聲明周期內保存的變量，但是變量的更新不需要組件的重新渲染，我們可以使用 useRef 鉤子。

function ClickButton(props){
  const count = useRef(0)
  const onClickCount = () => {
    count.current++
  }
  const onClickRequest = () => {
    apiCall(count.current)
  }
  return (
    <div>
      <button onClick={onClickCount}>Click</button>
      <button onClick={onClickRequest}>Submit</button>
    </div>
  )
}

02.使用了router.push而非link

在React SPA應用中，我們用react-router來處理路由的跳轉，我們很經常在組件中寫了一個按鈕，通過點擊按鈕的事件來處理路由的跳轉，如下代碼：

不推薦×

function ClickButton(props){
  const history = useHistory()
  const onClickGo = () => {
    history.push('/where-page')
  }
  return <button onClick={onClickGo}>Go to where</button>
}

問題所在：盡管上述代碼可以正常工作，但是卻不符合Accessibility（易訪問性設計）的要求，此類按鈕并不會被屏幕閱讀器當作一個可以跳轉的鏈接。因此我們可以改造一下代碼，如下代碼：

推薦√

function ClickButton(props){
  return <Link to="/next-page">
    <span>Go to where</span>
  </Link>
}

03.通過useEffect來處理actions

有時候，我們只想在 React 更新 DOM 之后運行一些額外的代碼。比如發送網絡請求，手動變更 DOM，記錄日志。

不推薦×

function DataList({ onSuccess }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);
  const fetchData = () => {
    setLoading(true);
    callApi()
      .then((res) => setData(res))
      .catch((err) => setError(err))
      .finally(() => setLoading(false));
  };
  useEffect(() => {
    fetchData();
  }, []);
  useEffect(() => {
    if (!loading && !error && data) {
      onSuccess();
    }
  }, [loading, error, data, onSuccess]);
  return <div>Data: {data}</div>;
}

問題所在：上面的代碼使用了兩個useEffect ，第一個用來請求異步數據，第二個用來調用回調函數。在第一個異步請求數據成功，才會觸發第二個 useEffect 的執行，但是，我們并不能完全保證，第二個 useEffect 的依賴項完全受控于第一個 useEffect 的成功請求數據。因此我們可以改造一下代碼，如下代碼：

推薦√

function DataList({ onSuccess }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);
  const fetchData = () => {
    setLoading(true);
    callApi()
      .then((res) => {
        setData(res)
        onSuccess()
       })
      .catch((err) => setError(err))
      .finally(() => setLoading(false));
  };
  useEffect(() => {
    fetchData();
  }, []);
  return <div>Data: {data}</div>;
}

04.單一職責組件

什么時候該把一個組件分成幾個更小的組件？如何構建組件樹？在使用基于組件的框架時，所有這些問題每天都會出現。然而，設計組件時的一個常見錯誤是將兩個用例組合成一個組件。

不推薦×

function Header({ menuItems }) {
  return (
    <header>
      <HeaderInner menuItems={menuItems} />
    </header>
  );
}
function HeaderInner({ menuItems }) {
  return isMobile() ? <BurgerButton menuItems={menuItems} /> : <Tabs tabData={menuItems} />;
}

問題所在：上面的代碼通過這種方法，組件HeaderInner試圖同時成為兩個不同的東西，一次做不止一件事情并不是很理想。此外，它還使得在其他地方測試或重用組件變得更加困難。因此我們可以改造一下代碼，如下代碼：

推薦√

將條件提升一級，可以更容易地看到組件的用途，并且它們只有一個職責，即<Tabs/>或<BurgerButton/>，而不是試圖同時成為兩個不同的東西。

function Header(props) {
  return (
    <header>
      {isMobile() ? <BurgerButton menuItems={menuItems} /> : <Tabs tabData={menuItems} />}
    </header>
  )
}

05.單一職責useEffects

通過對比componentWillReceiveProps或componentDidUpdate方法，才認識到userEffect的美麗。但是沒有妥當使用useEffect也是容易出問題的。

不推薦×

function Example(props) {
  const location = useLocation();
  const fetchData = () => {
    /*  Calling the api */
  };
  const updateBreadcrumbs = () => {
    /* Updating the breadcrumbs*/
  };
  useEffect(() => {
    fetchData();
    updateBreadcrumbs();
  }, [location.pathname]);
  return (
    <div>
      <BreadCrumbs />
    </div>
  );
}

問題所在：上面的useEffect同時觸發了兩個副作用，但是并不都是我們需要的副作用，因此我們可以改造一下代碼，如下代碼：

推薦√將兩個副作用從一個useEffect中分離出來。

function Example(props) {
  const location = useLocation();
  const fetchData = () => {
    /*  Calling the api */
  };
  const updateBreadcrumbs = () => {
    /* Updating the breadcrumbs*/
  };
  useEffect(() => {
    updateBreadcrumbs();
  }, [location.pathname]);
  useEffect(()=>{
    fetchData();
  },[])
  return (
    <div>
      <BreadCrumbs />
    </div>
  );
}

以上就是“hooks寫React組件要注意哪些細節”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。