React 및 Nextjs 관련 지식 포인트 요약

React 및 Nextjs 지식 포인트 요약

함수식 구성 요소와 클래스 구성 요소의 차이는 무엇입니까

1. 함수식 구성 요소는 무상태 구성 요소를 만드는 데 사용되며, 구성 요소는 실례화되지 않으며,this의 대상에 접근할 수 없으며, 생명주기 방법에 접근할 수 없으며, 부작용이 없다. 클래스 구성 요소의 함수식 구성 요소 코드보다 읽을 수 있고, 대량의 불필요한 코드를 줄여서 하나의 구성 요소를 쉽게 만들 수 있다. 2. 클래스 구성 요소는 상태가 있는 구성 요소를 만드는 데 사용되며, 이 구성 요소는 실례화된다.구성 요소에 접근할 수 있는 생명주기 방법

Component와 PureCompoent의 차이점은 무엇입니까?

1. Pure Compoent는 더욱 성능이 있는Component의 버전으로 당신에게 얕은 비교를 가진should Component Update 방법을 제공하는 것을 제외하고Pure Component와Component는 기본적으로 완전히 비슷하다.props나state가 바뀔 때PureComponent는props와state를 얕게 비교합니다.3. 또한Component는 현재와 다음 상태의props와state를 비교하지 않습니다.따라서 shouldComponentUpdate가 호출될 때마다 구성 요소는 기본적으로 다시 렌더링됩니다.

등록 정보 Props 및 States를 사용할 시기

구성 요소의 개인 데이터를 사용할 때state 외부 데이터로 전송할 때props를 사용합니다

간단한 React Component 수명 주기 설명

react 구성 요소의 생명주기는 네 가지 단계가 있습니다: 초기화, 창설 단계, 운행 단계, 소각 단계

1. 초기화:

construct,state를 초기화하고props를state로 전환

2. 창설 단계:

Vue의created에 해당하는 구성 요소가 마운트될 것입니다. 이 때 가상 DOMcomponentDidMount를 렌더링하기 시작하지 않았습니다. Vue의mounted에 비해 구성 요소가 마운트되었습니다. 이 때 구성 요소가 페이지에 표시됩니다. 보통 우리는 여기서 aax 데이터를 요청하거나 dom에서 스타일을 바꾸려고 합니다.

3. 운행 단계

component Will Receive Props (주: 미래 17 버전에서 버려질 것): 구성 요소가 새로운 프로포즈를 받았을 때 호출될 수도 있지만, 프로포즈가 바뀌지 않았을 때도 터치할 수 있습니다. 예를 들어 부모 구성 요소 업데이트로 인한 터치일 수도 있습니다. 프로포즈가 바뀌었는지 비교해야 할 수도 있습니다. 이 방법은 처음 렌더링할 때 호출되지 않습니다.shouldComponentUpdate: 구성 요소가 업데이트되어야 하는지 판단하는 데 사용됩니다. 일반적으로 여기서 성능 최적화를 하고 불필요한 렌더링을 줄입니다. componentWillUpdate(주: 미래 17버전에서 버려질 것), 구성 요소가 업데이트되기 전(componentshouldupdate가true로 되돌아갈 때) componentDidUpdate를 사용합니다. 구성 요소 업데이트가 끝난 후에 호출됩니다. 이때 페이지는 다시 렌더링됩니다.state, 가상 DOM과 페이지는 동기화됩니다.

4. 폐기 단계

component Will Unmount, 구성 요소가 마운트 해제될 때 터치합니다. 타이머를 지우는 동작을 할 수 있습니다.
새로 추가된 갈고리 함수 1, get Derived State From Props (next Props,prev State) 새로운 정적 get Derived State From Props의 생명 주기는 구성 요소의 실례화와 새 props (부모 구성 요소가 다시 렌더링되기만 하면 이 props는 값이 같든 상관없이 새 props) 를 받은 후에 호출됩니다.이것은state를 업데이트할 대상을 되돌려주거나,null을 되돌려주어 새로운props가state 업데이트가 필요하지 않다는 것을 나타낼 수 있습니다.2. getsnapshot Before Update () 새로운 getsnapshot Before Update 생명주기가 업데이트되기 전에 호출됩니다. (예를 들어 DOM이 업데이트되기 전에)이 라이프 사이클의 반환 값은 componentDidUpdate에 세 번째 매개변수로 전달됩니다.(이 라이프 사이클은 자주 필요하지는 않지만 복구 중에 스크롤 위치를 수동으로 저장하는 데 사용할 수 있습니다.)

HOC 구성 요소가 무엇인지, HOC를 사용하기에 적합한 예를 들어라.

고급 구성 요소는 하나의 함수이며, 이 함수는 하나의 구성 요소를 매개 변수로 받아들여 새로운 구성 요소로 되돌려줍니다. 부작용이 없는 순수 함수입니다.예를 들어 페이지 권한 제어

// HOC.js
function withAdminAuth(WrappedComponent) {
    return class extends React.Component {
        state = {
            isAdmin: false,
        }
        async componentWillMount() {
            const currentRole = await getCurrentUserRole();
            this.setState({
                isAdmin: currentRole === 'Admin',
            });
        }
        render() {
            if (this.state.isAdmin) {
                return ;
            } else {
                return (
          ，      ！
);
            }
        }
    };
}

  a
// pages/page-a.js
class PageA extends React.Component {
    constructor(props) {
        super(props);
        // something here...
    }
    componentWillMount() {
        // fetching data
    }
    render() {
        // render page with data
    }
}
export default withAdminAuth(PageA);

무슨 일이야, RenderProps?RenderProps를 사용하기에 적합한 예를 들다

The Render Props는 코드를 반복하지 않고 구성 요소 간 기능을 공유하는 방법으로, Render Props 모드의 등장은 주로 HOC에서 발생하는 문제를 해결하기 위한 것이다.

props명칭 문제 걱정하지 마세요,render 함수에서 필요한state

만 찾으세요.

불필요한 구성 요소 수준 증가

render props 모드의 구축은 모두 동적이며 모든 변화는render에서 촉발되어 구성 요소 내의 생명 주기를 더욱 잘 활용할 수 있다.

장면 사용: Render Props는 화면에서 스크롤 위치 또는 마우스 위치 추적과 같은 읽기 전용 작업에 적합합니다.

Nextjs의 현재 코드가 전단에서 실행되는지 후단에서 실행되는지 어떻게 알 수 있습니까

서비스 측과 클라이언트의 본질적인 차이는 누가 html 내용의 연결을 완성하는가이다. 예를 들어 서버 측에서 완성한 다음에 클라이언트에게 돌아오면 서버 측에서 렌더링을 하고 만약에 클라이언트가 페이지 내용 데이터를 연결한다면 클라이언트 렌더링이다.현재 페이지가 클라이언트인지 서버 측의 렌더링인지 판단하는 세 가지 방식이 있다. a. 네트워크 요청을 보고 구분할 수 있다. 만약에 클라이언트 요청이면Respone이 Json 데이터를 되돌려준다. 그렇지 않으면 html 형식의 내용 데이터 b, 원본 코드를 볼 수 있다. 만약에 페이지에 보여준 데이터가 원본 코드에서 서버 측의 렌더링이라고 볼 수 있고 그렇지 않으면 클라이언트 렌더링 c,isServer 변수를 통해 현재 환경이 서버인지 클라이언트인지 판단할 수 있습니다

static async getInitialProps(ctx) {
const isServer =  ctx.isServer
}

Nextjs의 페이지 라이프 사이클에 대한 간단한 설명

Next.js는 우리에게 React와 구별되는 새로운 생명주기인 getIntial Props () 를 제공했다. 이 생명주기는 React의 정상적인 생명주기에서 벗어나지만, 우리는 여전히 구성 요소에서 react 구성 요소의 각종 생명주기 함수를 정상적으로 사용할 수 있다.getInitialProps, 구성 요소의 속성을 가져오고 처리하며, 구성 요소의 기본 속성을 되돌려줍니다.우리는 이 방법에서 데이터를 요청하여 페이지에 필요한 데이터를 가져와 앞쪽 페이지로 렌더링할 수 있습니다.페이지가 로드를 초기화할 때 getInitialProps는 서버에서만 로드됩니다.클라이언트는 라우팅 점프(Link 어셈블리 점프 또는 API 메소드 점프)만 getInitialProps를 실행합니다.참고: getInitialProps는 서브어셈블리에서 사용할 수 없습니다.페이지 페이지에서만 사용할 수 있습니다.

static async getInitialProps({ req, query, store }) {
store.dispatch(getPromoItemRequest())
store.dispatch(getHomePageDataRequest())
return {}
}

Router, Link 및 location을 설명하십시오.Nextjs에서 href의 차이

Router는 루트 대상으로route,pathname,query,push,replace 등 자주 사용하는 API를 제공합니다

 Router.push('/about')}>here

Link는 구성 요소입니다. Router 구성 요소를 기반으로 기본적으로 새 URL을 루트 창고에 밀어넣고, 새로운 입력을 방지하기 위해 Replace 속성을 사용할 수 있습니다.

      here
    

location.href는 Js가 제공하는 기본 점프 방식으로 location에 비해href, Router 및 Link의 강력한 성능과 편리함

Link에서 href와 as가 각각 무엇을 대표하는지 설명해 주십시오

href 링크 점프의 실제 경로 as는 브라우저에 나타나는 실제 경로로 URL 역할을 장식하기 위한 것입니다

언제쯤 사용해야 할지app.js 및 뭘 넣어야 하는지app.js

1、다시 쓰기를 통해app.js 파일, 우리는 앱 구성 요소를 재구성할 수 있다. 앱 구성 요소에 일부 항목에 변하지 않는 내용을 추가할 수 있다. 예를 들어 페이지의 레이아웃 2, 전역 공공 스타일 css 및 상태 설정, componentDidCatch를 사용하여 사용자 정의 처리 오류

Nextjs의 Production ENV(NODE ENV=production)는 무엇이 특별합니까

무슨 일 단원 테스트 및 그 준칙이 무엇입니까

유닛 테스트(unittesting)는 을 가리킨다소프트웨어중 최소가테스트 유닛셀 테스트 지침을 검토하고 검증합니다.

유닛 테스트를 작고 빠르게 유지

단원 테스트는 전자동/비 상호작용식

이어야 한다.

단원 테스트를 쉽게 뛰게 한다

테스트에 대한 평가

실패한 테스트 즉시 수정

테스트를 단원급으로 유지

간편한 확장

테스트의 독립성 유지

Keep tests close to the class being tested

합리적인 명명 테스트 용례

공유 인터페이스만 테스트

블랙박스로 본다

백합으로 본다

참깨 함수도 테스트

우선 실행 범위

에 주목

경계 값 무시

랜덤 값 생성기

제공

특성당 1회만 측정

현식 단언 사용

역방향 테스트 제공

코드 설계 시 테스트 주의

예약된 외부 리소스에 액세스하지 마십시오

테스트 비용 비교

테스트 우선순위를 합리적으로 배정

테스트 실패에 대비

쓰기 테스트 용례 재현 버그

한계 파악

어떻게 단원 테스트의 커버율을 높입니까

코드의 질을 향상시키고 고도의 단원 테스트 커버율은 가장 효과적인 수단 중 하나이다. 우수한 기원 단원 테스트 프레임워크를 사용하는데 그 커버율은 흔히 매우 높다. 커버율은 테스트 용례의 커버public 방법, 함수 중의if-else 등 논리, 파라미터 검사, 내부 정의 등에 나타난다.