5 kesalahan umum ketika membangun komponen Bereaksi (dengan kait) pada tahun 2020

Halo! Dalam artikel ini, Anda akan belajar tentang kesalahan paling umum saat membuat komponen Bereaksi, serta mengapa mereka dianggap kesalahan, bagaimana cara menghindari atau memperbaikinya.

, dev.to. Quarkly .

React

React -, . api/concept React- .

, , React, , , React', - .

, , , . , , , , .

, , . . , , , , - . , , , .

React-, , . , , — , . , .

1. useState,

React’ — . . , , , , .

useState , React’. , .

: , , — , . . .

:

function ClickButton(props) {
  const [count, setCount] = useState(0);

  const onClickCount = () => {
    setCount((c) => c + 1);
  };

  const onClickRequest = () => {
    apiCall(count);
  };

  return (
    <div>
      <button onClick={onClickCount}>Counter</button>
      <button onClick={onClickRequest}>Submit</button>
    </div>
  );
}

:

, : , , ? ? : , . React’ , , , .

, , , , . .

:

, , , useRef. , .

function ClickButton(props) {
  const count = useRef(0);

  const onClickCount = () => {
    count.current++;
  };

  const onClickRequest = () => {
    apiCall(count.current);
  };

  return (
    <div>
      <button onClick={onClickCount}>Counter</button>
      <button onClick={onClickRequest}>Submit</button>
    </div>
  );
}

2. router.push

, React’, , React-.

, , . SPA, . - . React — react-router, .

, ?

:

function ClickButton(props) {
  const history = useHistory();

  const onClick = () => {
    history.push('/next-page');
  };

  return <button onClick={onClick}>Go to next page</button>;
}

:

, : , -. , , . ? , .

:

, , <Link> <a>.

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

: !

3. useEffect

, React’, — useEffect. , prop state. , , - .

, DOM. , onSuccess, .

:

function DataList({ onSuccess }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);

  const fetchData = useCallback(() => {
    setLoading(true);
    callApi()
      .then((res) => setData(res))
      .catch((err) => setError(err))
      .finally(() => setLoading(false));
  }, []);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  useEffect(() => {
    if (!loading && !error && data) {
      onSuccess();
    }
  }, [loading, error, data, onSuccess]);

  return <div>Data: {data}</div>;
}

:

useEffect: API , onSuccess. , , , . , ?

, . . 100% , , fetch . , , , .

:

— onSuccess , .

function DataList({ onSuccess }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);

  const fetchData = useCallback(() => {
    setLoading(true);
    callApi()
      .then((fetchedData) => {
        setData(fetchedData);
        onSuccess();
      })
      .catch((err) => setError(err))
      .finally(() => setLoading(false));
  }, [onSuccess]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return <div>{data}</div>;
}

, onSuccess API.

4.

. ? ? , . .

, , ( isMobile, ).

:

function Header(props) {
  return (
    <header>
      <HeaderInner menuItems={menuItems} />
    </header>
  );
}

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

:

HeaderInner . , . .

:

, , , : , -, .

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

5. useEffect

, componentWillReceiveProps componentDidUpdate React-? , useEffect , .

, useEffect , . , , , (breadcrumbs) ( react-router ).

:

function Example(props) {
  const location = useLocation();

  const fetchData = useCallback(() => {
    /*  Calling the api */
  }, []);

  const updateBreadcrumbs = useCallback(() => {
    /* Updating the breadcrumbs*/
  }, []);

  useEffect(() => {
    fetchData();
    updateBreadcrumbs();
  }, [location.pathname, fetchData, updateBreadcrumbs]);

  return (
    <div>
      <BreadCrumbs />
    </div>
  );
}

:

: « » (data-fetching) « » (displaying breadcrumbs). useEffect. useEffect , fetchData updateBreadcrumbs location. , fetchData location. , .

:

, , , .

function Example(props) {
  const location = useLocation();

  const updateBreadcrumbs = useCallback(() => {
    /* Updating the breadcrumbs*/
  }, []);

  useEffect(() => {
    updateBreadcrumbs();
  }, [location.pathname, updateBreadcrumbs]);

  const fetchData = useCallback(() => {
    /*  Calling the api */
  }, []);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return (
    <div>
      <BreadCrumbs />
    </div>
  );
}

: .

React- . , , , , . , - . 100%.

, — , .