React를 시작하기 위한 지식 포인트 모음

프론트 엔드에서 작업하는 모든 사람은 지금이 Vue, React 및 Angular라는 세 가지 주요 프레임워크의 시대라는 것을 알아야 합니다. Vue는 파일 구조가 전통적인 HTML의 그림자를 갖고 있어 처음 접하는 프런트 엔드 직원에게 매우 "친숙"하기 때문에 시작하기 가장 쉬운 것으로 인식됩니다. Angular도 HTML을 유지하지만 시작하기가 가장 어렵습니다. 그 이유는 Google의 백엔드 프로그래머가 개발했으며 순수 Typescript를 사용하고 Rxjs를 비동기식으로 사용하기 때문일 수 있습니다. . 높은. React를 시작하는 것은 적당히 어렵다. 인터넷에서는 Vue보다 React를 시작하는 것이 더 어렵다는 의견이 많다. ES6에서는 어떤 점을 이해하기 어렵게 만들고 React를 시작하기가 더 어렵다고 말합니다. 오늘은 React를 시작하기 위해 마스터해야 할 몇 가지 지식 포인트를 정리해 보겠습니다.

React를 도입해야 하는 이유

React를 작성할 때 다음과 같은 코드를 작성할 수 있습니다.

import React from 'react'

function A() {
  // ...other code
  return <h1>前端桃园</h1>
}

위 코드에서는 React를 사용하지 않는데 왜 React를 도입해야 하는지 궁금하신가요?

'react'에서 import React를 삭제하면 다음 오류가 보고됩니다.

이 React는 어디에 사용되어 React를 도입할 때 오류를 보고하게 되는 이유를 모르겠습니다. 그렇다면 제가 잘 이해하지 못하는 것은 JSX입니다.

위 코드(import 문 무시)를 변환을 위해 온라인 babel에 넣을 수 있으며, babel이 위 코드를 다음으로 변환한다는 것을 알 수 있습니다.

function A() {
  // ...other code
  return React.createElement("h1", null, "前端桃园");
}

본질적으로 JSX는 React.createElement(comComponent, props, ...children) 함수는 구문 설탕을 제공합니다.

class 대신 className을 사용하는 이유

1. React의 초기 개념은 HTML 대신 브라우저의 DOM API와 일관성을 유지하는 것입니다. 왜냐하면 JSX는 HTML을 대체하는 데 사용되지 않는 JS의 확장이므로 더 가깝습니다. 요소 생성에 사용됩니다. 요소에 클래스를 설정하려면 className API:

const element = document.createElement("p")
element.className = "hello"

2를 사용해야 합니다. 브라우저 문제, ES5 이전에는 객체에 예약어를 사용할 수 없습니다. 다음 코드는 IE8에서 오류를 발생시킵니다:

const element = {
  attributes: {
    class: "hello"
  }
}

3. 속성을 분해할 때 클래스 변수를 할당하면 문제가 발생합니다.

const { class } = { class: 'foo' } // Uncaught SyntaxError: Unexpected token }
const { className } = { className: 'foo' } 
const { class: className } = { class: 'foo' }

속성이 작은 낙타 대문자를 사용하는 이유

JSX는 구문론적으로 HTML보다 JavaScript에 더 가깝기 때문에 React DOM은 HTML 속성 이름의 명명 규칙을 사용하는 대신 camelCase(작은 camelCase 명명)를 사용하여 속성 이름을 정의합니다.

왜 우리는 생성자에서 super를 호출하고 props를 전달해야 합니까

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <p>
        </p><h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      
    );
  }
}

그리고 super를 호출할 수 있을 뿐만 아니라 props를 전달하는 단락도 있지만 왜 그렇게 해야 하는지는 알려주지 않습니다. 이것.

왜 super를 호출해야 할까요?

사실 이는 React의 한계가 아니라 JavaScript의 한계입니다. 생성자에서 이를 호출하려면 super를 미리 호출해야 합니다. React에서는 생성자 this.state = xxx에서 상태를 초기화하는 경우가 많기 때문에 super를 호출해야 합니다.

props를 전달해야 하는 이유는 무엇인가요?

props를 super에 전달해야 한다고 생각할 수도 있습니다. 그렇지 않으면 React.Component가 this.props를 초기화할 수 없습니다.

class Component {
  constructor(props) {
    this.props = props;
    // ...
  }
}

그러나 실수로 props 전달을 놓친 경우에는 직접 호출하세요. super()를 사용하더라도 렌더링 및 기타 메소드에서 this.props에 계속 액세스할 수 있습니다(믿을 수 없다면 시도해 보세요).

이게 왜 괜찮은 걸까요? React는 생성자가 호출된 후 새로 생성된 인스턴스 객체에 props를 할당하기 때문입니다.

const instance = new YourComponent(props);
instance.props = props;

하지만 이는 React를 사용할 때 super(props) 대신 super()를 사용할 수 있다는 뜻인가요?

아직 작동하지 않습니다. 그렇지 않으면 공식 웹사이트에서는 props 호출을 권장하지 않습니다. 비록 React가 생성자가 실행된 후에 this.props에 값을 할당하더라도 this.props는 여전히 super() 호출 후에 할당되고 생성자가 끝나기 전에는 쓸모가 없습니다.

// React 내부
클래스 구성 요소 {
생성자(소품) {
This.props = 소품;
// ...
}
}

// 코드 내부
클래스 버튼은 React.Component를 확장합니다.
생성자(소품) {
슈퍼();

위 내용은 React를 시작하기 위한 지식 포인트 모음의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!