React Native es6 Syntax_javascript 기술에 대한 심층 분석

React 네이티브는 es6을 직접 사용하여 코드를 작성합니다. 많은 새로운 구문이 작업 효율성을 향상할 수 있습니다

구조파괴 할당

var {
 StyleSheet,Text,View
} = React;

이 코드는 ES6의 새로운 구조분해 할당문입니다. 단일 문을 사용하여 객체의 여러 속성을 얻고 이를 여러 변수에 할당할 수 있습니다.

위 코드는 다음과 같습니다.

var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.View

몇 가지 예를 더 살펴보세요. 이전에는 변수에 값을 할당하려면 값을 직접 지정할 수밖에 없었습니다.

var a = 1;
var b = 2;
var c = 3;

ES6에서는 다음과 같은 작성이 가능합니다.

var [a, b, c] = [1, 2, 3];

자세한 내용은 변수 구조 분해 및 할당을 참조하세요

화살표 기능

React Native에도 유사한 코드가 자주 나타납니다.

ES6의 새로운 화살표 연산자 =>는 함수 작성을 단순화합니다. 연산자의 왼쪽은 입력 매개변수이고, 오른쪽은 수행된 연산과 반환된 값입니다. Inputs=>outputs

밤 몇 개를 인용해 느껴보세요:

var array = [1, 2, 3];
//传统写法
array.forEach(function(v, i, a) {
  console.log(v);
});
//ES6
array.forEach(v => console.log(v));
var sum = (num1, num2) => { return num1 + num2; }
//等同于：
var sum = function(num1, num2) {
  return num1 + num2;
 };

자세한 내용은 Google에서 확인하거나 다음을 확인하세요. https://www.imququ.com/post/arrow-function-in-es6.html

확산 연산자

… 연산자(확산 연산자라고도 함)는 이미 ES6 배열에서 지원됩니다. 적용을 거치지 않고 배열 또는 배열과 유사한 함수를 함수의 매개변수로 직접 전달할 수 있습니다.

var people=['Wayou','John','Sherlock'];
//sayHello函数本来接收三个单独的参数人妖，人二和人三
function sayHello(people1,people2,people3){
  console.log(`Hello ${people1},${people2},${people3}`);
}
//但是我们将一个数组以拓展参数的形式传递，它能很好地映射到每个单独的参数
sayHello(...people);//输出：Hello Wayou,John,Sherlock 
//而在以前，如果需要传递数组当参数，我们需要使用函数的apply方法
sayHello.apply(null,people);//输出：Hello Wayou,John,Sherlock

React에서 스프레드 연산자는 일반적으로 속성의 일괄 할당에 사용됩니다. JSX에서는 ... 연산자를 사용하여 객체의 키-값 쌍을 ReactElement의 props 속성과 병합할 수 있습니다.

var props = {};
 props.foo = x;
 props.bar = y;
 var component = <Component {...props} />;
//等价于
var props = {};
 props.foo = x;
 props.bar = y;
 var component = <Component foo={x} bar={y} />;
它也可以和普通的XML属性混合使用，需要同名属性，后者将覆盖前者：
JavaScript
var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

자세한 내용: https://facebook.github.io/react/docs/jsx-spread.html

수업

ES6에서는 클래스에 대한 지원을 추가하고 클래스 키워드를 도입했습니다. (사실 클래스는 항상 JavaScript에서 예약어였으며, 향후 새 버전에서 사용될 수 있다는 점을 고려하기 위한 목적이었는데 이제 드디어 들어왔습니다. 편리함) . JS 자체는 객체 지향적이며 ES6에서 제공되는 클래스는 실제로 JS 프로토타입 패턴의 래퍼일 뿐입니다. 이제 네이티브 클래스 지원이 제공되므로 개체 생성 및 상속이 더욱 직관적이고 부모 클래스 메서드 호출, 인스턴스화, 정적 메서드 및 생성자와 같은 개념이 더욱 시각적입니다.

class PropertyView extends Component {
  render() {
    return (
      <View></View>
    )
  }
}
//等价于
var PropertyView = React.createClass({
  render() {
    return (
      <View></View>
    )
  }
})

메소드 정의

ECMAScript 6에는 메소드 정의라는 새로운 구문 설탕이 도입되었습니다. 이전 완전 작성 방법과 비교하여 이 약어를 사용하면 함수 키워드를 하나 더 적게 작성할 수 있습니다.

React.createClass({
  render() {
    return (
      <View></View>
    )
  }
})
//等价于
React.createClass({
  render : function() {
    return (
      <View></View>
    )
  }
})

마지막으로 잘 쓰여진 ES6 PPT를 추천합니다: http://khan4019.github.io/ES6/

React 네이티브는 es6을 직접 사용하여 코드를 작성합니다. 많은 새로운 구문이 작업 효율성을 향상할 수 있습니다

구조파괴 할당

var {
	 StyleSheet,
	 Text,
	 View
	} = React;

이 코드는 ES6의 새로운 구조분해 할당문입니다. 단일 문을 사용하여 객체의 여러 속성을 얻고 이를 여러 변수에 할당할 수 있습니다.

위 코드는 다음과 같습니다.

	var StyleSheet = React.StyleSheet;
	var Text = React.Text;
	var View = React.View

몇 가지 예를 더 살펴보세요. 이전에는 변수에 값을 할당하려면 값을 직접 지정할 수밖에 없었습니다.

 var a = ;
 var b = ;
 var c = ;

ES에서는 다음과 같은 작성이 가능합니다.

var [a, b, c] = [, , ];

자세한 내용은 변수 구조 분해 및 할당을 참조하세요

화살표 기능

React Native에도 유사한 코드가 자주 나타납니다.
ES6의 새로운 화살표 연산자 =>는 함수 작성을 단순화합니다. 연산자의 왼쪽은 입력 매개변수이고, 오른쪽은 수행된 연산과 반환값입니다. Inputs=>outputs

밤 몇 개를 인용해 느껴보세요:

	var array = [, , ];
//传统写法
	array.forEach(function(v, i, a) {
	  console.log(v);
	});
//ES
	array.forEach(v => console.log(v));
	var sum = (num, num) => { return num + num; }
//等同于：
	var sum = function(num, num) {
	  return num + num;
	 };

자세한 내용은 Google에서 확인하거나 다음을 확인하세요. https://www.imququ.com/post/arrow-function-in-es6.html
스프레드 연산자
... 연산자(확산 연산자라고도 함)는 이미 ES6 배열에서 지원됩니다. 적용을 거치지 않고 배열 또는 배열과 유사한 함수를 함수의 매개변수로 직접 전달할 수 있습니다.

 var people=['Wayou','John','Sherlock'];
//sayHello函数本来接收三个单独的参数人妖，人二和人三
 function sayHello(people,people,people){
   console.log(Hello ${people},${people},${people});
 }
//但是我们将一个数组以拓展参数的形式传递，它能很好地映射到每个单独的参数
 sayHello(...people);
//输出：Hello Wayou,John,Sherlock
//而在以前，如果需要传递数组当参数，我们需要使用函数的apply方法
 sayHello.apply(null,people);
//输出：Hello Wayou,John,Sherlock
而在React中，延展操作符一般用于属性的批量赋值上。在JSX中，可以使用…运算符，表示将一个对象的键值对与ReactElement的props属性合并。
 var props = {};
  props.foo = x;
  props.bar = y;
  var component = <Component {...props} />;
//等价于
 var props = {};
  props.foo = x;
  props.bar = y;
  var component = <Component foo={x} bar={y} />;

일반 XML 속성과 혼합할 수도 있으며, 동일한 이름의 속성이 필요하며 후자가 전자를 재정의합니다.

 var props = { foo: 'default' };
 var component = <Component {...props} foo={'override'} />;
 console.log(component.props.foo);
// 'override'

更多详细信息：https://facebook.github.io/react/docs/jsx-spread.html

class

ES6中添加了对类的支持，引入了class关键字（其实class在JavaScript中一直是保留字，目的就是考虑到可能在以后的新版本中会用到，现在终于派上用场了）。JS本身就是面向对象的，ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后，对象的创建，继承更加直观了，并且父类方法的调用，实例化，静态方法和构造函数等概念都更加形象化。

	class PropertyView extends Component {
	  render() {
	    return (
	      <View></View>
	    )
	  }
	}
//等价于
	var PropertyView = React.createClass({
	  render() {
	    return (
	      <View></View>
	    )
	  }
	})

方法定义(method definition)

ECMAScript 6中,引入了一种名叫方法定义(method definition)的新语法糖,相对于以前的完整写法,这种简写形式可以让你少写一个function键字.

 React.createClass({
   render() {
     return (
       <View></View>
     )
   }
 })
//等价于
 React.createClass({
   render : function() {
     return (
       <View></View>
     )
   }
 })

以上是小编给大家分享的react native es6语法，希望大家喜欢。