개발자마다 알아야 할 5가지 팁

React는 프런트엔드 애플리케이션을 구축하는 데 유용한 툴입니다.본고는 귀하께 이러한 기교를 즉시 실시하여 React 게임을 개선하고 더 좋은 React 개발자가 되도록 도와주며 더 좋은 코드를 작성하고 처음에 두려웠던 면접에서 우수한 성적을 거두도록 도와줄 것입니다.

1. 로드 지연
로드 지연은 객체나 리소스의 로드 또는 초기화를 필요할 때까지 지연시키는 설계 모드입니다.이것은 성능을 크게 향상시켰다.React의 경우, 묶음 크기의 감소는 초기 적재 시간을 더욱 빨리 초래할 수 있으며, 이것은 주의력의 경계가 줄어드는 오늘날에 매우 중요하다.
다행히도, React는 개발자로 하여금 마운트 지연을 실현하기 쉽게 한다.동적 가져오기 문장 import()을 React.lazy으로 포장하기만 하면 됩니다.
만약 우리가 Counter.js 파일을 가지고 있다면

// Counter.js
import { useState } from 'React'

const Counter = () => {
  const [count, setCount] = useState('');

  const increment = () => setCount(count => count + 1);
  const decrement = () => setCount(count => count - 1);

  return (
    <div>
      <button onClick={decrement}> - <button>
      <span> {count} <span>
      <button onClick={increment}> + <button>
    </div>
  );
};

App.js의 카운터 로드 지연:

// App.js
import { lazy } from 'React'

const Counter = lazy(() => import('./Counter'));

const App = () => {
  return (
    <div>
    <Suspense fallback={<Loader />}>
        <Counter />
    </Suspense>
    </div>
  );
};

Counter은 필요할 때만 로드가 지연되고 Loader 구성 요소는 로드 시 표시됩니다.

2. 맞춤형 연결
리액트 16.8이 발표되면서 개발자들은 리액트 갈고리를 사용하기 시작했다.간단하게 말하자면 갈고리는 경량급 기능 구성 요소에서 다른 기능을 실현할 수 있는 함수입니다. 예를 들어 상태와 생명주기 방법입니다. 이런 기능 구성 요소는 이전에 상대적으로 무거운 클래스 구성 요소에만 한정되었습니다.
React에서 상자를 열면 바로 제공하는 갈고리를 제외하고 개발자는 자신의 갈고리를 작성하여 그들의 개인적인 수요를 만족시킬 수 있다.
창 크기에 접근해야 한다면, 이 문제를 해결하기 위해 useWindowSize 갈고리를 만들 수 있습니다.

import { useState, useEffect } from 'react'

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: 0,
    height: 0,
  })

  useEffect(() => {
    const handler = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      })
    }

    handler()
    window.addEventListener('resize', handler)

    // Remove event listener on cleanup
    return () => {
      window.removeEventListener('resize', handler)
    }
  }, [])

  return windowSize
}

3. 반응조각
React에서는 모든 어셈블리에 단일 요소를 반환해야 합니다.오랜 시간 동안, 이것은 당신이 div 또는 수조 표시법으로 모든 물건을 포장할 수 있는 주요한 문제이다.

const DivWrap = () => {
    return (
        <div>
            <ComponentA />
            <ComponentB />
        </div>
    )
}

const ArrayNotation = () => {
    return [
        <ComponentA key="a" />
        <ComponentB key="b" />
    ]
}

반응 16.2 후 Fragment을 도입한다.DOM에 요소를 추가하지 않고 함께 결합할 수 있는 React 요소입니다.

import { Fragment } from 'react'

const Frag = () => {
    return (
        <Fragment>
            <ComponentA />
            <ComponentB />
        </Fragment>
    )
}

// Or after Babel 7
const FragNewSyntax = () => {
    return (
        <>
            <ComponentA />
            <ComponentB />
        </>
    )
}

4. 개발 도구
React Dev Tools는 크롬과 Firefox에 적합한 놀라운 확장입니다.그것은 모든 구성 요소에 도구, 상태, 연결 등 모든 세부 사항을 제공하여 디버깅 프로그램을 쉽게 한다.

흥미로운 사실: 넷플릭스, 트위터, 페이스북, 기타 React를 사용하는 사이트 등 톱 회사 사이트의 코드 라이브러리를 부분적으로 깊이 있게 이해할 수 있다


5. 고급 컴포넌트(HOC)
너는 네비게이션 표시줄, 사이드바, 꼬릿말을 사이트의 모든 페이지에 추가하는 것에 싫증이 났니?고급 구성 요소(HOC) 구원!
HOC는 구성 요소 논리를 재사용하는 React의 고급 기술입니다.구성 요소를 가져오고 HOC 기능이나 데이터를 포함하는 새 구성 요소를 되돌려줍니다.withRouter() 또는 connect()은 일반적인 HOC의 예입니다.
요소를 수용하고 탐색 모음, 사이드바 및 바닥글을 자동으로 추가하는 withLayout HOC를 만듭니다.

const withLayout = (Element) => {
    return (props) => (
        <>
            <Navbar />
            <Sidebar/>
            <Element {...props} />
            <Footer />
        </>
    );
}

HOC 사용

const Home = () => {
    return (
        <h1>
            I am Home!
        </h1>
    )
}

export default withLayout(Home)

마무리
이 글은 이것으로 끝냅니다.제가 당신에게 약간의 견해를 제공할 수 있기를 바랍니다.아래의 평론에서 당신의 생각을 공유하세요.
당신의 발전 여행에 행운을 빕니다!

읽어주셔서 감사합니다.
같이 일하고 싶어요?Upwork으로 문의하십시오.
뭐 하는지 보고 싶으세요?내 GitHub 보기
2022년 중 디지털 유목자로 출발하는 프리랜서입니다.길을 재촉하고 싶습니까?따라와.
내 블로그에 관심을 가지고 매주 뉴스를 이해하다
FAQ
다음은 내가 자주 묻는 몇 가지 문제다.그래서 나는 이 흔한 문제 부분이 너의 문제를 해결할 수 있기를 바란다.

저는 초보자입니다. 전단 네트워크 개발을 어떻게 배워야 합니까?
다음 기사를 보십시오.

지도해 주시겠어요?
죄송하지만, 제 업무량이 너무 많아서, 누구를 지도할 시간이 없습니다.

우리 사이트에서 합작하고 싶습니까?
앞에서 말한 바와 같이, 나는 지금 시간이 촉박한 시기에 처해 있기 때문에, 나는 어쩔 수 없이 이런 기회를 포기해야 한다.

내 전화를 받아라

Portfolio

Upwork

GitHub