脚本宝典收集整理的这篇文章主要介绍了学习 React:是 ES6还是 React?，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

从开发人员那里听到的一个问题：

因为React和ES6交织在一起，所以我很难消化任何给定的代码块。什么来自React？什么是ES6 JavaScript？

了解什么是什么可以帮助我们找出要搜索的内容以及在哪里学习它。下面我将介绍您在React教程和示例中看到的大量语法。 对于每个功能，我展示了几个可能的外观示例，确定它的来源，快速概述所谓的内容和内容，并链接到一些可以帮助您了解它的资源。

箭头功能（ES6）

// example 1
this.handleChange = () => {
  this.DOSomething();
  return;
}


// example 2
this.array.map(ITem => item.name);

箭头功能是ES6中最受欢迎的新功能之一。它们结合了一个灵活的新语法和一个隐式bind，它使得this错误函数内部等于this定义它们的上下文。 新语法基本上由括号中的参数列表组成，后跟“胖箭头”（=>），后跟函数体。 对于紧凑性，如果只有一个参数，则可以忽略括号。另外，如果函数体是返回值的单个语句，则可以忽略{}它周围的括号和return语句，从而导致上面第二个示例中的紧凑语法。此示例以对象数组开头，并返回name每个对象的值的数组。 对于那些来自其他动态语言（如Python或Ruby）的人来说，箭头函数语义与lambda函数非常相似。

承诺（ES6）

api.get(someUrl).then((value) => {
    console.LOG(value);
}).catch((error) => {
    console.log(error);
});

Promise是处理异步性的另一种机制，而不是传递回调函数。只要你then在代码中看到，你就可以确定你正在处理一个承诺。 承诺本质上是价值的占位符。值可能就在那里，或者它可能需要等到一些异步操作，如AJAX调用才能解决。无论如何，如果您调用thenpromise并传递函数，则在值可用时将调用该函数。 这种模式导致处理异步编程比链式回调更自然的模式，因为你可以传递这些对象，返回它们，链接它们以及各种有趣的东西。 以下是对其使用的一个很好的介绍：ES6承诺的简单指南。

let和const（ES6）

const temPErature = this.PRops.temperature;
let iterator = 1;

当JavaScript首次标准化时，只有一个关键字用于声明变量：VAR。语义var也有点奇怪 - 范围很奇怪，你可能会以人们很难理解的方式隐藏变量。 ES6解决了这个问题，定义了两个新的关键字来声明具有更简单语义的变量。两者都具有块范围，这let与大多数开发人员自然期望的更接近。的关键字意味着参考不能改变（尽管如果参考是到对象或阵列，所述内部可改变-这不是不可改变），而允许参考改变。constconstlet 大多数开发商已经采取措施来使用独家let和const，与var被遗留代码较强的代码味道。 你可以在Wes Bos的这篇优秀文章中了解更多关于差异的信息：Let vs Const。

对象解构（ES6）

// example 1
const { props, state } = this;


// example 2
const [ First, second ] = array;

对象解构是一种机制，用于以类似于对象文字语法的方式将对象或数组中的属性直接分配到变量中。 到目前为止，我所看到的最常见的用途是挑选一个对象的特定属性，以便在函数内部使用，如上面的第一个例子。 解构还支持默认值，可以在函数参数内部使用，从而产生如下强大的模式：现代JavaScript中的优雅模式：RORO。

课程（ES6）

class MyClass extends BaseClass {
  constructor() {
    super();
    this.doSomething();
  }
}

在class与extends关键字和特殊功能constructor是部分ES6类。这些类是一种新的语法，用于以面向对象的方式开发JavaScript，感觉与其他面向对象的语言更相似。 这种新语法不是面向对象的新方法 - 在它下面，JavaScript仍然使用原型继承模型 - 但它们确实使得更容易推断正在发生的事情。 这里有几篇关于JavaScript类的不同内容的好文章：Javascript：Prototype vs Class，让我们揭开JavaScript的“新”关键字的神秘面纱。

Props and State (React)

constructor(props) {
  super(props);
  this.state = {date: new Date()};
}

React 的概念props和state形式化，并在整个面向组件的框架中被接受。 首先，props指的是传递到组件中的数据，并影响该组件的行为方式。组件不能props直接更改- 它不拥有此数据 - 但它会对props中的更改做出反应，因此如果props更改，组件将重新呈现。 接下来，state指的是组件本身控制的数据。这种状态可能会直接影响组件的布局，或者可能仅用于内部簿记 - 这取决于组件。该组件拥有此数据并可以更改它，但也会自动对状态更改做出反应，并在更改时重新呈现。需要通过指定的方法进行更改setState，如下所述。 以下是对道具和状态的精彩介绍：ReactJS：Props vs. State。

setState（React）

 this.setState({isLoggedIn: true});

Spread/Rest (ES6)

// example 1
const image = { ...image, ...attributes };


// example 2
this.setState({ ...this.state.image, ...attributes });

的传播算子，又名...操作，本质上需要的阵列或一个对象，并将其扩展成它的一组项目。这使您可以执行有趣的操作，例如合并对象或使用非常紧密的语法创建对象的浅表副本。 我在这里写了一个扩展运算符的细分：了解JavaScript中的Spread运算符。

Template Literals (ES6)

模板文字是一种在JavaScript中创建字符串的新方法。从本质上讲，它们允许您将javascript直接插入字符串，而无需像以前那样进行大量连接和添加字符串。 模板文字是反引号中的一个字符串`，然后一个内部的任何内容都${}被评估为JavaScript。 最常见的用法是简单地将变量放入，但任何单个JavaScript表达式都可以在其中${}，包括函数 - 返回值将被注入到字符串中。 这里有一个很好的介绍模板文字及其相关功能标签模板，对CSS技巧：模板面值。

生命周期钩子（React）

componentWillmount() {
}

componentDidMount() {
}

componentWillReceiveProps() {
}

componentWillUnmount() {
}

看起来像这样的函数 - 以一致的方式命名的React以componentWill或Did 开头，以及一些描述，称为Lifecycle钩子。 这些函数允许您在组件生命周期中的特定时间执行逻辑。React会自动为您做很多事情，但有时您需要轻推它以在此过程中的特定点执行更多操作。 一些最常见的用途是在安装组件时加载数据，或者为某些本地状态获取道具的副本。 以下是一些最常见的生命周期钩子的介绍：30天的React：Lifecycle Hooks。

JSX（React）

// example 1
const element = <h1>Hello, world!</h1>;



// example 2
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

JSX是JavaScript的语法扩展，允许将类似HTML的模板直接嵌入到JavaScript中。 它是React中最具争议性的部分之一，它让许多长期的Web开发人员失望，同时被倡导者吹捧为显着提高生产力。可以在没有JSX的情况下使用React，但建议使用JSX。 关于JSX的两点快速了解。首先，如果您有一行标记（如上面的第一个示例），您可以直接将标记放入JavaScript中，而如果您要使用多行，则需要用括号括起来。 其次，单括号内的任何内容{}都会被评估为JavaScript。这样可以轻松地将逻辑或动态值嵌入到标记中。 这是关于JSX的深入教程：深度JSX。 我相信React和ES6中有更多元素令人困惑。如果你碰到了我没有报道过的，请不要犹豫，在下面的评论与我联系，我会帮助你理解它并将其添加到列表中。

脚本宝典总结

以上是脚本宝典为你收集整理的学习 React:是 ES6还是 React?全部内容，希望文章能够帮你解决学习 React:是 ES6还是 React?所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。