React에 대한 몇 가지 일반적인 인터뷰 질문(공유)
- 青灯夜游앞으로
- 2020-08-04 17:16:125315검색
[관련 주제 추천: react 인터뷰 질문(2020)]
1. redux middleware
답변: 미들웨어는 액션 -> 리듀서(reducer)를 가로채는 프로세스를 맞춤화하는 타사 플러그인 모드를 제공합니다. 액션 -> 미들웨어 -> 리듀서가 됩니다. 이 메커니즘을 통해 데이터 흐름을 변경하고 비동기 작업, 작업 필터링, 로그 출력, 예외 보고 등과 같은 기능을 구현할 수 있습니다.
공통 미들웨어: redux-logger: 로그 출력 제공, redux-thunk: 비동기 작업 처리, actionCreator의 반환 값은 promise
2입니다. : 1 .구성 요소에 필요한 데이터는 상위 구성 요소에서 전달되어야 하며 Flux처럼 저장소에서 직접 가져올 수 없습니다.
2. 구성 요소의 관련 데이터가 업데이트되면 상위 구성 요소가 이 구성 요소를 사용할 필요가 없더라도 상위 구성 요소는 여전히 다시 렌더링되므로 효율성에 영향을 미치거나 필요할 수 있습니다. 판단을 위해 복잡한 shouldComponentUpdate를 작성합니다.
3. 리액트 컴포넌트는 비즈니스 컴포넌트와 기술 컴포넌트로 어떻게 구분되나요?
답변: 구성 요소는 일반적으로 해당 역할에 따라 UI 구성 요소와 컨테이너 구성 요소로 구분됩니다. UI 컴포넌트는 UI 프리젠테이션을 담당하고, 컨테이너 컴포넌트는 데이터 및 로직 관리를 담당합니다. 둘은 React-Redux에서 제공하는 connect 메소드를 통해 연결됩니다.
4. React 수명 주기 기능
답변: 1. 초기화 단계:
getDefaultProps: 인스턴스의 기본 속성을 가져옵니다.
getInitialState: 각 인스턴스의 초기화 상태를 가져옵니다.
comComponentWillMount: 구성 요소가 곧 로드됩니다.
render: 구성 요소가 여기에서 가상 DOM 노드를 생성합니다.
comComponentDidMount: 구성 요소가 실제로 로드된 후
2. 실행 상태:
comComponentWillReceiveProps: 구성 요소가 속성을 수신하려고 할 때 호출됩니다.
shouldComponentUpdate: 구성 요소는 새 속성 또는 새 상태를 수신합니다(false를 반환할 수 있고, 데이터 수신 후 업데이트하지 않으며, 렌더링 호출을 방지하고 후속 기능이 계속 실행되지 않습니다)
comComponentWillUpdate: 구성 요소가 곧 업데이트될 예정이며 속성 및 상태 수정할 수 없습니다
render: 구성 요소가 다시 그려집니다.
comComponentDidUpdate: 구성 요소가 업데이트되었습니다
3. 파괴 단계:
comComponentWillUnmount: 구성 요소가 곧 파괴됩니다
5. 어떤 주기 함수가 반응 성능 최적화인가요?
답변: shouldComponentUpdate 이 메소드는 dom을 다시 그리기 위해 render 메소드를 호출해야 하는지 여부를 결정하는 데 사용됩니다. DOM 렌더링은 많은 성능을 소모하기 때문에 shouldComponentUpdate 메소드에 좀 더 최적화된 DOM diff 알고리즘을 작성할 수 있다면 성능이 크게 향상될 수 있습니다.
6. 가상 DOM이 성능을 향상시키는 이유는 무엇입니까?
답변: 가상 dom은 불필요한 dom 작업을 피하기 위해 dom diff 알고리즘을 사용하여 성능을 향상시키는 js와 실제 dom 사이에 캐시를 추가하는 것과 동일합니다.
구체적인 구현 단계는 다음과 같습니다.
1. JavaScript 객체 구조를 사용하여 DOM 트리의 구조를 표현한 다음 이 트리를 사용하여 실제 DOM 트리를 만들고 이를 문서에 삽입합니다. 상태가 변경되면 재구성합니다. 새로운 객체 트리. 그런 다음 새 트리를 기존 트리와 비교하고 두 트리의 차이점을 기록합니다.
2단계에서 기록한 차이점을 1단계에서 구축한 실제 DOM 트리에 적용하면 뷰가 업데이트됩니다.
7. Diff 알고리즘?
답변: 1. 트리 구조를 레벨에 따라 분해하고 동일한 레벨의 요소만 비교합니다.
2. 비교를 용이하게 하기 위해 목록 구조의 각 단위에 고유한 키 속성을 추가합니다.
3. React는 동일한 클래스의 컴포넌트만 일치시킵니다. (여기서 클래스는 컴포넌트의 이름을 나타냅니다.)
4. 병합 작업에서 해당 컴포넌트의 setState 메서드를 호출하면 React는 해당 컴포넌트를 더티로 표시합니다. 각 이벤트에 루프가 끝나면 React는 더티로 표시된 모든 구성 요소를 확인하고 다시 그립니다.
6. 선택적 하위 트리 렌더링. 개발자는 diff 성능을 향상시키기 위해 shouldComponentUpdate를 재정의할 수 있습니다.
8. React 성능 최적화 솔루션답변: 1) 불필요한 DOM 작업을 피하기 위해 shouldComponentUpdate를 다시 작성하세요. 2) React.js의 프로덕션 버전을 사용하세요.
3) 키를 사용하여 React가 목록에 있는 모든 하위 구성 요소의 가장 작은 변화를 식별할 수 있도록 하세요.
9. Flux의 개념을 간략하게 설명하세요.
답변: Flux의 가장 큰 특징은 데이터의 "일방향 흐름"입니다.
1. 사용자가 View에 액세스합니다
2. View는 사용자의 Action을 발행합니다
3. Dispatcher는 Action을 수신하고 그에 따라 Store를 업데이트하도록 요구합니다.
4. " event
5.View "change" 이벤트를 받은 후 페이지를 업데이트하세요
10. React 프로젝트에서는 어떤 scaffolding이 사용됐나요? Mern? Yeoman?
답변: Mern: MERN은 Mongo, Express, React 및 NodeJS를 사용하여 동형 JS 애플리케이션을 쉽게 생성할 수 있는 스캐폴딩 도구입니다. 설치 시간을 최소화하고 검증된 기술을 사용하여 개발 속도를 높일 수 있습니다.
11. 리액트를 아시나요?
답변: 예, React는 Facebook에서 개발한 경량 구성 요소 라이브러리로 MVC의 V 레이어 문제인 프런트 엔드 뷰 레이어의 일부 문제를 해결하는 데 사용됩니다. 내부 Instagram 웹사이트는 React로 구축되어 있습니다. .
12. React는 어떤 문제를 해결하나요?
답변: 세 가지 문제가 해결되었습니다: 1. 구성 요소 재사용 문제, 2. 성능 문제, 3. 호환성 문제:
13. React 프로토콜?
답변: React가 따르는 계약은 "BSD 라이센스 + 특허 오픈 소스 계약"입니다. 이 계약은 상당히 이상합니다. 귀하의 제품이 Facebook과 경쟁하지 않는다면 자유롭게 React를 사용할 수 있지만, 경쟁이 있다면 귀하의 React는 사용 라이센스가 취소됩니다
14. shouldComponentUpdate를 이해하셨나요?
답변: React 가상 dom 기술은 dom과 가상 dom 간의 지속적인 diff 비교가 필요합니다. dom 트리가 큰 경우 이 비교 작업은 더 많은 시간이 소요됩니다. 따라서 React는 일부 변경 사항이 있는 경우 shouldComponentUpdate와 같은 패치 기능을 제공합니다. , 구성 요소가 새로 고쳐지는 것을 원하지 않거나 새로 고쳐져 이전과 동일하게 유지되는 경우 이 기능을 사용하여 React에 직접 알려 diff 작업이 필요하지 않고 효율성이 더욱 향상됩니다.
15. React는 어떻게 작동하나요?
답변: React는 가상 DOM을 생성합니다. 구성 요소의 상태가 변경되면 React는 먼저 "diffing" 알고리즘을 통해 가상 DOM의 변경 사항을 표시하고 두 번째 단계는 조정이며 DOM은 diff 결과로 업데이트됩니다.
16. React를 사용하면 어떤 장점이 있나요?
답변: 1. 렌더링 기능만 보면 구성 요소가 어떻게 렌더링되는지 쉽게 알 수 있습니다.
2 JSX의 도입으로 구성 요소의 코드를 더 읽기 쉽게 만들고 레이아웃을 더 쉽게 이해할 수 있습니다. 구성 요소 또는 구성 요소가 서로 참조하는 방식
3. SEO 및 성능을 향상할 수 있는 서버 측 렌더링 지원
4. 테스트하기 쉬움
5. React는 View 레이어에만 중점을 두고 사용할 수 있습니다. 다른 프레임워크(예: Backbone.js, Angular.js)와 함께
17. 프리젠테이션 컴포넌트와 컨테이너 컴포넌트의 차이점은 무엇인가요?
답변: 1. 프레젠테이션 구성 요소는 구성 요소의 모양에 관심이 있습니다. 디스플레이는 구체적으로 props를 통해 데이터와 콜백을 허용하고 자체 상태를 거의 갖지 않지만 디스플레이 구성 요소에 자체 상태가 있는 경우 일반적으로 데이터 상태보다는 UI 상태에만 관심을 갖습니다.
2. 컨테이너 구성 요소는 구성 요소가 어떻게 작동하는지에 더 관심이 있습니다. 컨테이너 구성 요소는 프레젠테이션 구성 요소 또는 기타 컨테이너 구성 요소에 데이터와 동작을 제공하며 Flux 작업을 호출하고 이를 프레젠테이션 구성 요소에 대한 콜백으로 제공합니다. 컨테이너 구성 요소는 다른 구성 요소의 데이터 소스이기 때문에 상태를 유지하는 경우가 많습니다.
18. 클래스 구성 요소와 기능 구성 요소의 차이점은 무엇인가요?
답변: 1. 클래스 구성 요소를 사용하면 구성 요소 자체 상태 및 수명 주기 후크와 같은 추가 기능을 사용할 수 있을 뿐만 아니라 구성 요소가 저장소에 직접 액세스하여 상태를 유지할 수 있습니다.
2. props를 받고 구성 요소가 페이지에 자체적으로 렌더링되면 해당 구성 요소는 '상태 비저장 구성 요소'이며 순수 함수를 사용하여 생성될 수 있습니다. 이러한 구성 요소는 멍청한 구성 요소 또는 프레젠테이션 구성 요소라고도 합니다
19. 상태(상태)와 소품(구성 요소)의 차이점은 무엇인가요?
답변: 1. State는 구성요소가 마운트될 때 필요한 데이터의 기본값에 사용되는 데이터 구조입니다. 상태는 시간이 지남에 따라 변경될 수 있지만 대부분 사용자 이벤트 동작의 결과입니다.
2.Properties(프로퍼티의 약어)는 컴포넌트의 구성입니다. Prop은 상위 구성 요소에서 하위 구성 요소로 전달되며 하위 구성 요소에 관한 한 Prop은 변경할 수 없습니다. 컴포넌트는 자신의 props를 변경할 수 없지만 하위 컴포넌트의 props를 하나로 묶을 수 있습니다(통합 관리). Prop은 단순한 데이터가 아닙니다. 콜백 함수도 Prop을 통해 전달될 수 있습니다.
20. Ajax 요청은 React 구성 요소에서 어디에서 시작되어야 합니까?
답변: React 구성 요소에서는 네트워크 요청이 componentDidMount에서 시작되어야 합니다. 이 메서드는 구성 요소가 처음으로 "마운트"(DOM에 추가)될 때 실행되며 구성 요소의 수명 주기에서 한 번만 실행됩니다. 더 중요한 것은 구성요소가 마운트되기 전에 Ajax 요청이 완료되었는지 보장할 수 없다는 점입니다. 그렇다면 이는 마운트 해제된 구성요소에 대해 setState를 호출하려고 시도한다는 의미이며 이는 작동하지 않습니다. componentDidMount에서 네트워크 요청을 하면 업데이트할 구성 요소가 있는지 확인할 수 있습니다.
21. 제어 컴포넌트란 무엇입니까?
답변; HTML에서 ,