반응과 es6이란 무엇입니까?

react는 사용자 인터페이스 구축을 위해 Facebook에서 출시한 선언적이고 효율적이며 유연한 JavaScript 개발 프레임워크입니다. 이 프레임워크는 하위 구성 요소가 외부 구성 요소에 직접 영향을 미칠 수 없는 모델을 제공하여 HTML 문서를 효율적으로 업데이트하고 정리합니다. 최신 단일 페이지 애플리케이션의 구성 요소 간 분리. es6은 JavaScript의 다음 버전 표준으로, JavaScript 언어를 사용하여 복잡한 대규모 응용 프로그램을 작성하고 엔터프라이즈 수준의 개발 언어로 만드는 것이 목표입니다.

이 튜토리얼의 운영 환경: windows7 시스템, ECMAScript 6&&react18 버전, Dell G3 컴퓨터.

react란 무엇입니까

---

react.js는 사용자 인터페이스 구축을 위해 Facebook에서 출시한 JavaScript 개발 프레임워크입니다.

React는 사용자 인터페이스 구축을 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. React를 사용하면 짧고 독립적인 코드 조각을 복잡한 UI 인터페이스로 결합할 수 있습니다. 이러한 코드 조각을 "구성 요소"라고 합니다.

React의 디자인 아이디어는 매우 독특하고 혁명적인 혁신이며 뛰어난 성능을 가지고 있으며 코드 로직이 매우 간단하기 때문입니다. 따라서 앞으로 웹 개발의 주류 도구가 될 수 있다고 생각하며 주목하고 사용하는 사람들이 늘어나고 있습니다.

React는 데이터에 대한 HTML 보기를 제공하는 오픈 소스 JavaScript 라이브러리입니다. React 뷰는 일반적으로 사용자 정의 HTML 태그에 지정된 다른 구성 요소가 포함된 구성 요소를 사용하여 렌더링됩니다. React는 프로그래머에게 하위 구성 요소가 외부 구성 요소에 직접 영향을 미칠 수 없는 모델, 데이터 변경 시 HTML 문서에 대한 효율적인 업데이트, 최신 단일 페이지 애플리케이션의 구성 요소 간 명확한 분리를 제공합니다.

React의 장점은 다음과 같습니다.

• 대규모 애플리케이션에 더 적합하고 테스트 가능성이 더 좋습니다.

• 웹 및 모바일 네이티브 앱 모두

• 더 큰 생태계, 더 지원적이고 사용하기 쉽습니다. tools

• 중간 및 대규모 프로젝트에 더 적합

es6

---

es6은 ECMAScript6(ECMAScript의 6번째 버전)을 의미합니다. ECMAScript6은 2015년 6월 표준으로 공식 출시된 JavaScript 언어로, 공식적으로 ECMA스크립트 2015(ES2015).

ECMAScript 6은 기본적으로 ES5보다 인기가 훨씬 빠릅니다. 주된 이유는 최신 브라우저, 특히 이미 대부분의 ES6 특성을 지원하는 Chrome 및 Firefox 브라우저 때문입니다.

그 이후로 ECMA 스크립트는 ES6+라고 하는 몇 가지 중요한 새 기능을 추가하기 위해 매년 주요 버전을 출시했습니다.

ES와 JS의 관계 이해

ES = ECMAScript는 동적 스크립팅 언어의 '표준'이고, JS = JavaScript는 상표권으로 인해 ES의 표준, 기본, 주류 '구현'입니다. 문제는 유럽 컴퓨터 협회에서 제정한 언어 표준을 JS라고 부를 수 없고 ES라고만 부를 수 있다는 것입니다.

새로운 ES6 표준의 목적은 JS를 사용하여 대규모 웹 애플리케이션을 개발하고 엔터프라이즈 수준의 개발 언어입니다. 엔터프라이즈 수준 개발 언어는 모듈식 개발에 적합하고 종속성 관리가 우수합니다.

ES6를 배워야 하는 이유는 무엇입니까? ES6는 어떤 용도로 사용되나요?

ES5는 프론트엔드가 점점 더 복잡해지고 거대해지는 현 상황을 감당할 수 없습니다. ES6는 ES5의 개선이자 업그레이드라고 할 수 있습니다.

1. 주류 브라우저는 ES6를 완벽하게 지원합니다

2. 업계의 최신 프런트 엔드 프레임워크는 ES6 구문을 완전히 사용했습니다

3. WeChat 애플릿, uni-app 등은 모두 ES6 구문을 기반으로 합니다

4. 취업부터 시작해서 중소기업, 풀스택, 이력서에 스킬 하나 더 추가하시고, 체험기간 동안 더 빠르게 시작하실 수 있습니다.

Variables

• let
  한 범위에 하나의 let 변수만 선언할 수 있습니다. 자식 범위에서도 let 변수를 선언하면 부모 범위의 let 변수에 영향을 주지 않습니다.
• var
  하나의 범위에서 여러 var 변수를 선언할 수 있습니다. var 변수가 하위 범위에서도 선언되면 상위 범위의 var 변수에도 영향을 미칩니다.
• const
  final과 동일한 상수는 수정할 수 없습니다.
• global
  변수 유형을 선언하지 않은 변수는 기본적으로 전역 변수(창 속성)를 사용합니다.

객체 지향

• Principle
  JavaScript의 객체지향 기능은 프로토타입과 생성자를 기반으로 하며 이는 클래스 기반의 일반적인 기능과 다릅니다. JavaScript는 객체 상속의 언어 수준 기능을 제공하지 않지만 프로토타입 복사를 통해 이를 제공합니다.
• 객체를 생성하는 세 가지 방법

  1. {pojo}（实例变量、实例方法、get、set） 
  2. function（实例变量、实例方法、prototype、apply、call） 
  3. class（实例变量、实例方法、prototype、extends、super）

prototype

함수와 클래스에만 프로토타입이 있습니다. 이는 인스턴스 변수와 인스턴스 메서드를 동적으로 추가하고 상속을 구현한다는 의미입니다.

Inherit

• call/apply
  상속 관계에 적용되는 이 키워드는 하위 클래스가 상위 클래스에 매개변수를 전달할 때 사용해야 합니다.
• extends
  상속 관계에 사용되는 A는 확장합니다. B, 그러면 A는 B의 상위 클래스입니다
• super
  하위 클래스에서 상위 클래스의 메서드를 호출할 때 보조 키워드를 사용하세요
• ES5 상속 메서드
  다음으로 결합된 상속 집합(프로토타입 체인)을 직접 작성합니다. 상속(상속된 프로토타입) + 상속(상속된 속성) 구성). 이 메서드는 프로토타입 체인 상속에서 다중 상속을 구현할 수 없는 단점, 하위 클래스 인스턴스 생성 시 부모 클래스 생성자에 매개 변수를 전달할 수 없는 단점, 생성자에서 프로토타입 속성/메서드를 상속할 수 없는 단점을 피할 수 있습니다. 계승.

function Person(name,age){                                             /* 父类 */
    this.name = name || 'father';                            //实例变量
    this.namesonF = this.nameson;
    this.age = age;
    this.talk = function(){alert("talk");};                 //实例方法
};
function Son(name){                                                     /* 子类 */
    this.nameson = name || 'son';
    // Person.call(this,'name',18);                          //继承：构造继承，复制父类的实例属性给子类，不能继承原型属性/方法
    Person.apply(this,['name',18]);                          //继承：构造继承，复制父类的实例属性给子类，不能继承原型属性/方法
}
// Son.prototype = new Person("zhangsan",19);                   //继承：原型链继承，父类的实例作为子类的原型，拷贝属性两次，不合理
Son.prototype = Person.prototype;                            //继承：原型链继承，父类的实例作为子类的原型

Person.prototype.publicParam="param1";                       //动态添加实例变量
Person.prototype.talk=function(){alert("talk");}            //动态添加实例方法

var son = new Son();                                         //实例化对象，调用构造函数(constructor)

• ES6 상속 방법
  ES6 상속은 Java, Scala 및 기타 언어와 매우 유사한 새로운 작성 방법을 만듭니다. 기본적으로 결합 상속(프로토타입 체인 상속(프로토타입 상속) + 생성자 상속(상속) 속성) ) 방식으로 사용됩니다.

class Point {
    constructor(x, y) {
        this.x = x;                                           //实例变量
        this.y = y;
    }
}
class Son extends Point {
    constructor(z, w) {
        super(z,w);
        this.z = z;                                           //实例变量
        this.w = w;
    }
}
var son = new Son(1,2);

화살표 함수

화살표 함수는 ES6에 새로 추가된 구문입니다. 이는 Java의 람다 및 스칼라의 함수형 구문

• code

var single = a => console.log(a);
var single = (a) => (console.log(a));
var single = (a, b) => {console.log(a + b)};
var single = (a, b) => {return a + b};

템플릿 문자열 , 템플릿 문자열, 문자열의 새로운 구문 연결

Rreeee

• destructulaing

재구성/해체, 가변 대화형 문법 arguments

실제 매개변수, 매개변수를 직접 읽기 위해 ES6에 추가된 변수

• 코드

var templateStr = () => {
    var str1 = "adsf\nsdfa";

    var template1 = `<ul><li>first</li> <li>second</li></ul>`;

    var x = 1;
    var y = 2;
    var template2 = `${x} + ${y} = ${x + y}`;

    var template3 = `${lettest4()}`;
    console.log(str1)
    console.log(template1)
    console.log(template2)
    console.log(template3)
}

【관련 추천:

javascript 비디오 튜토리얼, 프로그래밍 비디오】

위 내용은 반응과 es6이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!