2020年にReactコンポーネント(フック付き)を作成するときによくある5つの間違い

画像



こんにちは!この記事では、Reactコンポーネントを作成する際の最も一般的な間違いと、それらがエラーと見なされる理由、それらを回避または修正する方法について学びます。



, 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%.



, — , .




All Articles