전단 면접 보전 의 react 편

React 에서 keys 의 역할 은 무엇 입 니까?
Keys 는 React 가 어떤 목록 에서 요소 가 수정 되 거나 추가 되 거나 제거 되 었 는 지 추적 하 는 보조 표지 입 니 다.

개발 과정 에서 우 리 는 특정한 요소 의 key 가 동급 요소 에서 유일 성 을 가지 도록 확보 해 야 한다.React Diff 알고리즘 에서 React 는 요소 의 Key 값 을 통 해 이 요소 가 최근 에 만 들 어 졌 는 지 이동 한 요소 인지 판단 하여 불필요 한 요소 의 렌 더 링 을 감소 합 니 다.그 밖 에 React 는 Key 값 을 통 해 요소 와 로 컬 상태의 관련 관 계 를 판단 해 야 하기 때문에 우 리 는 함수 전환 에서 Key 의 중요성

을 무시 해 서 는 안 된다.
setState 함수 에 들 어 오 는 두 번 째 매개 변 수 는 무엇 입 니까?
이 함 수 는 setState 함수 호출 이 완료 되 고 구성 요소 가 다시 렌 더 링 을 시작 할 때 호출 됩 니 다. 이 함수 로 렌 더 링 이 완료 되 었 는 지 확인 할 수 있 습 니 다.

this.setState(
  { username: 'tylermcginnis33' },
  () => console.log('setState has finished and the component has re-rendered.')
)

this.setState((prevState, props) => {
  return {
    streak: prevState.streak + props.count
  }
})

React 에서 refs 의 역할 은 무엇 입 니까?

Refs 는 React 가 우리 에 게 제공 하 는 DOM 요소 나 특정한 구성 요소 의 인 스 턴 스 를 안전하게 접근 하 는 핸들

입 니 다.

요소 에 ref 속성 을 추가 한 다음 에 리 셋 함수 에서 이 요 소 를 DOM 트 리 에 있 는 핸들 을 받 아들 일 수 있 습 니 다. 이 값 은 리 셋 함수 의 첫 번 째 매개 변수 로 되 돌아 갑 니 다

라 이 프 사이클 중 어느 단계 에서 AJAX 요청 을 해 야 합 니까?
AJAX 요청 을 해 야 합 니 다.  componentDidMount  함수 에서 실행 되 는 주요 원인 은 다음 과 같다.

React 차세 대 조화 알고리즘 Fiber 는 렌 더 링 을 시작 하거나 중단 하 는 방식 으로 응용 성능 을 최적화 시 켜 componentWillMount 의 트리거 횟수 에 영향 을 줄 수 있 습 니 다.componentWillMount 라 는 라 이 프 사이클 함수 의 호출 횟수 가 불확실 해 지고 React 는 componentWillMount 를 여러 번 자주 호출 할 수 있 습 니 다.만약 에 우리 가 AJAX 요청 을 componentWillMount 함수 에 넣 으 면 여러 번 촉발 되 고 자 연 스 럽 게 좋 은 선택 이 아 닙 니 다.

만약 에 우리 가 AJAX 요청 을 생명주기 의 다른 함수 에 놓는다 면, 우 리 는 요청 이 구성 요소 마 운 트 가 끝 난 후에 만 응답 을 요구 할 것 이 라 고 보장 할 수 없습니다.만약 우리 의 데이터 요청 이 구성 요소 가 마 운 트 되 기 전에 완료 되 고 setState 함 수 를 호출 하여 구성 요소 상태 에 데 이 터 를 추가 하면 마 운 트 되 지 않 은 구성 요소 에 대해 오 류 를 보고 할 수 있 습 니 다.componentDidMount 함수 에서 AJAX 요청 을 하면 이 문 제 를 효과적으로 피 할 수 있 습 니 다

shouldComponent Update 의 역할
shouldComponent Update 는 구성 요소 업데이트 여 부 를 수 동 으로 판단 할 수 있 습 니 다. 구성 요소 의 응용 장면 설정 함수 의 합 리 적 인 반환 값 에 따라 불필요 한 업 데 이 트 를 피 할 수 있 습 니 다.
어떻게 React 에 게 생산 환경 판 을 컴 파일 해 야 하 는 지 알려 줍 니까?
일반적으로 우 리 는 Webpack 의 DefinePlugin 방법 을 사용 하여 NODE 를ENV 변수 값 을 production 으로 설정 합 니 다.컴 파일 버 전에 서 React 는 proptType 인증 및 기타 경고 정 보 를 무시 하고 코드 라 이브 러 리 의 크기 를 낮 출 수 있 습 니 다. React 는 Uglify 플러그 인 을 사용 하여 생산 환경 에서 불필요 한 설명 등 정 보 를 제거 합 니 다.
React 의 이벤트 처리 논 리 를 요약 합 니 다.
리 액 트 는 브 라 우 저 간 호환성 문 제 를 해결 하기 위해 브 라 우 저 네 이 티 브 이벤트 (Browser Native Event) 를 합성 이벤트 (Synthetic Event) 로 봉 하여 설 정 된 이벤트 프로세서 에 전송합니다.이곳 의 합성 사건 은 원생 사건 과 같은 인 터 페 이 스 를 제공 하지만 바 텀 브 라 우 저의 세부 적 인 차 이 를 차단 하여 행위 의 일치 성 을 확보 합 니 다.또 재 미 있 는 것 은 리 액 트 가 사건 을 하위 요소 에 직접 부착 하지 않 고 단일 사건 모니터 방식 으로 모든 사건 을 맨 위로 보 내 처리 한 다 는 점 이다.이렇게 하면 React 는 DOM 을 업데이트 할 때 DOM 에 붙 어 있 는 이벤트 모니터 를 어떻게 처리 하 는 지 고려 하지 않 아 도 되 고 최종 적 으로 성능 을 최적화 하 는 목적 을 달성 할 수 있다.
createElement 와 cloneElement 의 차 이 는 무엇 입 니까?
createElement 함 수 는 JSX 컴 파일 후 사용 하 는 React Element 를 만 드 는 함수 이 며, cloneElement 는 어떤 요 소 를 복사 하여 새로운 Props 로 전송 하 는 데 사 용 됩 니 다.
redux 미들웨어
미들웨어 는 제3자 플러그 인 모드 를 제공 하고 차단 action - > reducer 의 과정 을 사용자 정의 합 니 다.action - > middlewares - > reducer 로 변경 합 니 다.이 메커니즘 은 비동기 action, action 필터, 로그 출력, 이상 보고 등 데이터 흐름 을 바 꿀 수 있 습 니 다.

redux - logger: 로그 출력 제공

redux - thunk: 비동기 처리

redux - promise: 비동기 작업 을 처리 합 니 다. actionCreator 의 반환 값 은 promise

입 니 다.
뭐 공부 해요?

하나의 구성 요소 에 필요 한 데 이 터 는 반드시 부모 구성 요소 에서 전달 되 어야 하 며, flux 처럼 store 에서 직접 가 져 올 수 없습니다.

구성 요소 와 관련 된 데 이 터 를 업데이트 할 때 부모 구성 요소 가 이 구성 요 소 를 사용 하지 않 아 도 부모 구성 요 소 는 다시 render 를 사용 합 니 다. 효율 적 인 영향 을 미 칠 수 있 거나 복잡 한 shouldComponent Update 를 써 서 판단 해 야 합 니 다.

react 구성 요소 의 구분 업무 구성 요소 기술 구성 요소?

구성 요소 의 직책 에 따라 구성 요 소 를 UI 구성 요소 와 용기 구성 요소 로 나 눕 니 다.

UI 구성 요 소 는 UI 의 표현 을 담당 하고 용기 구성 요 소 는 데이터 와 논 리 를 관리 합 니 다.

둘 다 React - Redux 를 통 해 연결 방법 제공

react 생명주기 함수
푸 른 파도 React 면접 문제 집계 1, redux 미들웨어
미들웨어 는 제3자 플러그 인 모드 를 제공 하고 차단 action - > reducer 의 과정 을 사용자 정의 합 니 다.action - > middlewares - > reducer 로 변경 합 니 다.이 메커니즘 은 비동기 action, action 필터, 로그 출력, 이상 보고 등 데이터 흐름 을 바 꿀 수 있 습 니 다.
일반적인 미들웨어:
redux - logger: 로그 출력 제공
redux - thunk: 비동기 처리
redux - promise: 비동기 작업 을 처리 합 니 다. actionCreator 의 반환 값 은 promise 입 니 다.
2. redux 는 어떤 단점 이 있 습 니까?
1. 구성 요소 에 필요 한 데 이 터 는 부모 구성 요소 에서 전달 되 어야 하 며, flux 에서 store 에서 직접 가 져 올 수 없습니다.
2. 구성 요소 와 관련 된 데 이 터 를 업데이트 할 때 부모 구성 요소 가 이 구성 요 소 를 사용 하지 않 아 도 부모 구성 요 소 는 다시 render 를 사용 합 니 다. 효율 적 인 영향 을 미 칠 수 있 거나 복잡 한 shouldComponent Update 를 써 서 판단 해 야 합 니 다.
3. react 구성 요소 의 구분 업무 구성 요소 기술 구성 요소?
구성 요소 의 역할 에 따라 구성 요 소 를 UI 구성 요소 와 용기 구성 요소 로 나 눕 니 다.
UI 구성 요 소 는 UI 의 표현 을 담당 하고 용기 구성 요 소 는 데이터 와 논 리 를 관리 합 니 다.
둘 은 React - Redux 를 통 해 connect 방법 을 제공 합 니 다.
구체 적 인 사용 은 다음 링크 를 참조 할 수 있 습 니 다.http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html
react 생명주기 함수
초기 화 단계

getDefaultProps: 인 스 턴 스 의 기본 속성 가 져 오기

getInitial State: 인 스 턴 스 마다 초기 화 상태 가 져 오기

componentWillMount: 구성 요소 가 페이지 에 불 러 오고 렌 더 링 됩 니 다

render: 구성 요소 가 여기에서 가상 DOM 노드 를 생 성 합 니 다

omponentDidMount: 구성 요소 가 실제로 불 러 온 후

실행 중 상태

componentWillReceiveProps: 구성 요소 가 속성 을 받 을 때 호출 합 니 다

shouldComponent Update: 구성 요소 가 새로운 속성 이나 새로운 상 태 를 받 아들 일 때 (false 로 되 돌아 갈 수 있 습 니 다. 데 이 터 를 받 은 후에 업데이트 하지 않 고 render 호출 을 막 을 수 있 습 니 다. 뒤의 함 수 는 계속 실행 되 지 않 습 니 다)

componentWillUpdate: 구성 요소 가 곧 업 데 이 트 됩 니 다. 속성 과 상 태 를 수정 할 수 없습니다

render: 구성 요소 재 묘사

componentDid 업데이트: 구성 요소 가 업데이트 되 었 습 니 다

소각 단계

component WillUnmount: 구성 요소 가 곧 소 멸 됩 니 다

 
 
react 성능 최적화 주기 함수
shouldComponent Update 라 는 방법 은 render 방법 으로 dom 을 다시 묘사 해 야 하 는 지 여 부 를 판단 하 는 데 사 용 됩 니 다.dom 의 묘사 가 성능 을 매우 소모 하기 때문에, 만약 우리 가 shouldComponentUpdate 방법 에서 더욱 최 적 화 된 dom diff 알고리즘 을 쓸 수 있다 면, 성능 을 크게 향상 시 킬 수 있 습 니 다.
왜 가상 dom 이 성능 을 향상 시 킵 니까?
가상 dom 은 js 와 실제 dom 사이 에 캐 시 를 추가 한 것 과 같 습 니 다. dom diff 알고리즘 을 이용 하여 불필요 한 dom 작업 을 피하 고 성능 을 향상 시 킵 니 다.
구체 적 인 실현 절 차 는 다음 과 같다.

JavaScript 대상 구조 로 DOM 트 리 의 구 조 를 표시 합 니 다.그리고 이 트 리 로 진정한 DOM 트 리 를 만들어 문서 에 꽂 습 니 다

상태 가 변 경 될 때 새로운 대상 나 무 를 다시 만든다.그리고 새로운 나무 와 낡은 나 무 를 비교 하여 두 그루 의 나무 차 이 를 기록한다

2 개의 기 록 된 차 이 를 1 단계 에 구 축 된 진정한 DOM 트 리 에 적용 하면 보기 가 업 데 이 트 됩 니 다

 
 
diff 알고리즘?

나무 구 조 를 등급 에 따라 분해 하고 동급 원소 만 비교한다.

목록 구조의 각 단원 에 유일한 key 속성 을 추가 하여 비교 하기 편리 합 니 다.

React 는 같은 class 의 component 만 일치 합 니 다 (이 안의 class 는 구성 요소 의 이름 을 말 합 니 다)

병합 작업, component 의 setState 방법 을 호출 할 때 React 는 이 를 - dirty 로 표시 합 니 다. 모든 이벤트 순환 이 끝 날 때 까지 React 는 dirty 를 표시 한 component 를 검사 하고 다시 그립 니 다.

성질 트 리 렌 더 링 을 선택한다.개발 자 는 shouldComponent Update 를 다시 써 서 diff 의 성능 을 향상 시 킬 수 있다

react 성능 최적화 방안

불필요 한 dom 작업 을 피하 기 위해 shouldComponentUpdate 를 다시 씁 니 다

production 버 전의 react. js

를 사용 합 니 다.

키 를 사용 하여 React 식별 목록 의 모든 하위 구성 요소 의 최소 변 화 를 돕 기