React에서 구성 요소 논리를 공유하는 세 가지 방법

6234 단어 React공유구성 요소 논리
쓸데없는 말은 하지 마라. 이 세 가지 방식은 각각render props, 고급 구성 요소와 사용자 정의 훅이다.다음 순서대로 시연하다
사용자가 현재 페이지에 머무르는 시간을 기록하는 TimeOnPage 구성 요소가 있다고 가정합니다.

const TimeOnPage = () => {
 const [second, setSecond] = useState(0);

 useEffect(() => {
  setTimeout(() => {
   setSecond(second + 1);
  }, 1000);
 }, [second]);
 return (
  <div> ：{second} </div>
 );
}
만약 다른 구성 요소가 이 기능을 복용해야 한다면, 우리는 다른 구성 요소와 쉽게 공유할 수 있도록 봉인할 수 있습니까?
일반적으로 서브어셈블리를 끼워 넣는 방식을 자연스럽게 생각하는데,props를 이용하여 참고를 전달한다

const Child = (props) => {
 return <div>stayTime: {props.stayTime}s</div>;
};

const TimeOnPage = () => {
 const [second, setSecond] = useState(0);

 useEffect(() => {
  setTimeout(() => {
   setSecond(second + 1);
  }, 1000);
 }, [second]);
 return (
  <div>
   <Child stayTime={second} />
  </div>
 );
}
이것은 TimeOnPage 구성 요소 내부의 하드 인코딩에 속하며 봉인 복용 목표에 도달하지 못했습니다.렌더프로스 어떻게 하는지 볼까요?

render props


"render prop"은 React 구성 요소 간에 함수로 값을 사용하는prop 공유 코드를 가리키는 간단한 기술이다
다음은 TimeOnPage에서 함수인prop을 정의합니다. 어떤 구성 요소를 렌더링하고 싶으면 함수에서 되돌아오면 됩니다. 함수의 매개 변수는 공유하고자하는state입니다.

const Child = (props) => {
 return <div>stayTime: {props.stayTime}s</div>;
};

const TimeOnPage = (props) => {
 const [second, setSecond] = useState(0);

 useEffect(() => {
  setTimeout(() => {
   setSecond(second + 1);
  }, 1000);
 }, [second]);
 return <div>{props.render(second)}</div>;
};

<TimeOnPage render={(stayTime) => <Child stayTime={stayTime} />
사실,renderprop은 구성 요소에 어떤 내용을 렌더링해야 하는지 알려주는 함수prop입니다.
React Router도 이 기술을 사용했습니다.

<Router>
 <Route path="/home" render={() => <div>Home</div>} />
</Router>

고급 구성 요소


고급 구성 요소(HOC)는 React에서 구성 요소 논리를 재사용하는 고급 기술입니다.HOC 자체는 React API의 일부가 아니라 React의 조합 특성을 바탕으로 형성된 디자인 모델이다.
고급 구성 요소는 함수입니다. 매개 변수는 다시 사용해야 하는 구성 요소 A이고 반환 값은 새로운 구성 요소 N입니다.새 어셈블리 N은 어셈블리 A를 기반으로 가공되지만 어셈블리 A 자체는 수정되지 않고 기능만 향상됩니다.
뉴스 목록 구성 요소가 이렇게 생겼다고 가정하십시오.

const NewList = () => {
 return (
  <div>
   <ul>
    <li>news item</li>
    <li>news item</li>
   </ul>
  </div>
 );
}
뉴스 목록을 불러오는 동안loading 애니메이션 구성 요소를 표시하려면 

const Loading = () => {
 // loading 
}
const NewList = ({ isLoading }) => {
 return isLoading ? (
  <Loading />
 ) : (
  <div>
   <ul>
    <li>news item</li>
    <li>news item</li>
   </ul>
  </div>
 );
};
현재 Table 구성 요소도 데이터를 불러오는 동안loading 애니메이션 구성 요소를 표시해야 한다고 가정하고 비슷한 패턴을 따른다

const Loading = () => {
 // loading 
}
const DataList = ({ isLoading, ...props }) => {
 return isLoading ? (
  <Loading />
 ) : (
  <Table {...props} />
 );
};
이상, 당신은 DataList와 NewList의 구조가 매우 비슷하다는 것을 발견할 수 있습니다. 만약에 세 번째, 네 번째 구성 요소가loading을 추가해야 한다면 이 모드에 따라 세 번째, 네 번째를 계속 반복합니까?이것은 가장 이상적인 방법이 아니다. 더 좋은 방법은 고급 구성 요소를 사용하여 이 모델을 추상화하는 것이다.

const WithLoading = (WrappedComponent) => {
 return ({isLoading, ...props}) => {
  return isLoading ? <Loading /> : <WrappedComponent {...props} />;
 }
};
그리고 New List와 Data List를 수정하지 않고 각각의 로딩을 추가할 수 있습니다.

const NewList = () => {
 return (
  <div>
   <ul>
    <li>news item</li>
    <li>news item</li>
   </ul>
  </div>
 );
};

const DataList = (props) => {
 return <Table {...props} />
};

const WithLoading = (WrappedComponent) => {
 return ({isLoading, ...props}) => {
  return isLoading ? <Loading /> : <WrappedComponent {...props} />;
 }
};
//  loading NewList
const WithLoadingNewList = WithLoading(<NewList />)
//  loading DataList
const WithLoadingDataList = WithLoading(<DataList />)

사용자 지정 훅


Hook은 React 16.8의 새로운 기능입니다.이것은class를 작성하지 않고state 및 다른React 기능을 사용할 수 있습니다.
React Hook은useState,useEffect 등이 있습니다. 모두 함수입니다. 사용자 정의 Hook도 하나의 함수입니다. 그 이름은use로 시작하고 함수 내부에서 다른 Hook를 호출할 수 있습니다.React 구성 요소와 달리 사용자 정의 훅은 반환 값이 없을 수 있습니다.일반 함수와 달리 사용자 정의 훅 내부는 다른 훅을 호출할 수 있지만 일반 함수는 안 된다.
업무 논리를 쓰는 과정에서 일반적으로 중용할 수 있는 방법을 도구 함수로 정의한 후에 곳곳에서 다시 사용할 수 있다.마찬가지로 사용자 정의 훅을 통해 구성 요소 논리를 다시 사용할 수 있는 함수에 추출할 수 있습니다.사용자 정의 훅을 선택하느냐 도구 함수를 선택하느냐에 따라 추출할 구성 요소 논리가 다른 훅을 사용할 필요가 있느냐에 따라 달라집니다. 필요하면 사용자 정의 훅을 선택하십시오. 그렇지 않으면 도구 함수를 사용하면 됩니다.
본고의 첫 번째 TimeOnPage 구성 요소로 돌아가서 사용자 정의 훅으로 바꾸기

const useTimeOnPage = () => {
 const [second, setSecond] = useState(0);

 useEffect(() => {
  setTimeout(() => {
   setSecond(second + 1);
  }, 1000);
 }, [second]);
 return second;
}
사용 방법

const Demo = () => {
 const stayTime = useTimeOnPage();
 return <div> ：{stayTime} </div>
}

총결산


세 가지 공유 구성 요소 논리의 방식은 각자의 적용 장면이 있다.
render props는 서로 다른 하위 구성 요소/하위 요소가 있는 부모 구성 요소를 공유하는 데 적합합니다. 하위 구성 요소/하위 요소의'갱위'는 정의되어 있습니다. 지정한 위치에서만 렌더링할 수 있습니다.
고급 구성 요소는 기존 구성 요소를 수정하지 않는 기초 위에서 구성 요소를 확장하는 데 적합하다.
사용자 정의 훅은 할 수 있고 순수 함수도 기본적으로 할 수 있지만 때로는 사용자 정의 훅으로 실현하는 것이 더욱 편리하고 빠르다.
본문 링크:Github
이 글은 React에서 구성 요소 논리를 공유하는 세 가지 방식에 대한 상세한 설명입니다. 더 많은 React 공유 구성 요소 논리 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!
[프로그래머스] 직사각형 별찍기(javaScript)
Git 버전 2.3보다 오래된 임대 서버에 Git 배포

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage