达州做网站
大橙子网站建设，新征程启航
为企业提供网站建设、域名注册、服务器等服务
怎么学好JavaScript
本篇内容介绍了“怎么学好JavaScript”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
四子王网站建设公司成都创新互联,四子王网站设计制作，有大型网站制作公司丰富经验。已为四子王数千家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱，请找那个售后服务好的四子王做网站的公司定做！
在开始 React 之前先学习 JavaScript
当你开始进入 React 的世界，create-react-app（https://github.com/facebook/create-react-app）通常会是你的***个 React 项目。在搭建好项目后，你将看到下面的这个 React 类组件：
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( Welcome to React To get started, edit src/App.js and save to reload. React 类组件可能不是***的入手点。新手有许多东西需要消化，不一定与 React 有关：类语句、类方法和继承。导入语句也会在学习 React 时增加额外的复杂性。尽管主要焦点应该放在 JSX（React 的语法）上，但其他的东西也需要解释一番。这篇文章主要针对 JavaScript，所以请不用太担心 React 相关的内容。
React 和 JavaScript 类
关于 React 类组件，需要用到有关 JavaScript 类的先验知识。JavaScript 类的概念相对较新。之前，只有 JavaScript 的原型链可用于实现继承。JavaScript 类以原型继承为基础，让继承体系变得更简单。
定义 React 组件的一种方法是使用 JavaScript 类。
class Developer { constructor(firstname, lastname) { this.firstname = firstname; this.lastname = lastname; } getName() { return this.firstname + ' ' + this.lastname; } } var me = new Developer('Robin', 'Wieruch'); console.log(me.getName());一个类描述了一个实体，用于创建实体的实例。在使用 new 语句创建类的实例时，会调用这个类的构造函数。类的属性通常位于构造函数中。此外，类方法（例如 getName()）用于读取（或写入）实例的数据。类的实例在类中使用 this 对象来表示，但在外部，仅指定给 JavaScript 变量。
在面向对象编程中，类通常用来实现继承。在 JavaScript 中也一样，extends 语句可用于让一个类继承另一个类。一个子类通过 extends 语句继承了一个父类的所有功能，还可以添加自己的功能。
class Developer { constructor(firstname, lastname) { this.firstname = firstname; this.lastname = lastname; } getName() { return this.firstname + ' ' + this.lastname; } } class ReactDeveloper extends Developer { getJob() { return 'React Developer'; } } var me = new ReactDeveloper('Robin', 'Wieruch'); console.log(me.getName()); console.log(me.getJob());基本上，要理解 React 的类组件，知道这些就够了。JavaScript 类用于定义 React 组件，React 组件继承了从 React 包导入的 React Component 类的所有功能。
import React, { Component } from 'react'; class App extends Component { render() { return ( Welcome to React
); } } export default App;这就是为什么 render() 方法在 React 类组件中是必需的：从 React 包导入的 React Component 用它在浏览器中显示某些内容。此外，如果不从 React Component 继承，将无法使用其他生命周期方法（包括 render() 方法）。例如，如果不继承，那么 componentDidMount() 生命周期方法就不存在，因为现在这个类只是一个普通 JavaScript 类的实例。除了生命周期方法不可用，React 的 API 方法（例如用于本地状态管理的 this.setState()）也不可用。
我们可以通过 JavaScript 类来扩展通用类的行为。因此，我们可以引入自己的类方法或属性。
import React, { Component } from 'react'; class App extends Component { getGreeting() { return 'Welcome to React'; } render() { return ( {this.getGreeting()}
); } } export default App;现在你应该知道为什么 React 使用 JavaScript 类来定义 React 类组件。当你需要访问 React 的 API（生命周期方法、this.state 和 this.setState()）时，可以使用它们。接下来，你将看到如何以不同的方式定义 React 组件，比如不使用 JavaScript 类，因为有时候你可能不需要使用类方法、生命周期方法或状态。
尽管我们可以在 React 中使用 JavaScript 类继承，但这对于 React 来说不是一个理想的结果，因为 React 更倾向于使用组合而不是继承。因此，你的 React 组件需要扩展的唯一类应该是 React Component。
React 中的箭头函数
在给别人培训 React 时，我在一开始就向他们解释 JavaScript 的箭头函数。箭头函数是 ES6 新增的语言特性之一，让 JavaScript 向函数式编程更近了一步。
// JavaScript ES5 function function getGreeting() { return 'Welcome to JavaScript'; } // JavaScript ES6 arrow function with body const getGreeting = () => { return 'Welcome to JavaScript'; } // JavaScript ES6 arrow function without body and implicit return const getGreeting = () => 'Welcome to JavaScript';在 React 应用程序中使用 JavaScript 箭头函数通常是为了让代码保持简洁和可读。我很喜欢箭头函数，总是尝试将我的函数从 JavaScript ES5 重构成 ES6。在某些时候，当 JavaScript ES5 函数和 JavaScript ES6 函数之间的差异很明显时，我会使用 JavaScript ES6 的箭头函数。不过，对 React 新手来说，太多不同的语法可能会让人不知所措。因此，在 React 中使用它们之前，我会尝试解释 JavaScript 函数的不同特点。在以下部分，你将了解到如何在 React 中使用 JavaScript 箭头函数。
在 React 中将函数视为组件
React 使用了不同的编程范式，这要归功于 JavaScript 是一门“多面手”编程语言。在面向对象编程方面，React 的类组件可以很好地利用 JavaScript 类（React 组件 API 的继承、类方法和类属性，如 this.state）。另一方面，React（及其生态系统）也使用了很多函数式编程的概念。例如，React 的函数无状态组件是另一种定义 React 组件的方式。那么，如果可以像函数那样使用组件，将会怎样？
function (props) { return view; }这是一个接收输入（例如 props）并返回 HTML 元素（视图）的函数。它不需要管理任何状态（无状态），也不需要了解任何方法（类方法、生命周期方法）。这个函数只需要使用 React 组件的 render() 方法来进行渲染。
function Greeting(props) { return {props.greeting}
; }功能无状态组件是在 React 中定义组件的***方法。它们的样板代码较少，复杂性较低，并且比 React 类组件更易于维护。不过，这两者都有自己存在的理由。
之前提到了 JavaScript 箭头函数以及它们可以提升代码的可读性，现在让我们将这些函数应用无状态组件中。之前的 Greeting 组件在 JavaScript ES5 和 ES6 中的写法有点不一样：
// JavaScript ES5 function function Greeting(props) { return {props.greeting}
; } // JavaScript ES6 arrow function const Greeting = (props) => { return {props.greeting}
; } // JavaScript ES6 arrow function without body and implicit return const Greeting = (props) => {props.greeting}
JavaScript 箭头函数是让 React 无状态组件保持简洁的一个不错的方法。
React 类组件语法
React 定义组件的方式一直在演化。在早期阶段，React.createClass() 方法是创建 React 类组件的默认方式。现在不再使用这个方法，因为随着 JavaScript ES6 的兴起，之前的 React 类组件语法成为默认语法。
不过，JavaScript 也在不断发展，因此 JavaScript 爱好者一直在寻找新的方式。这就是为什么你会发现 React 类组件使用了不同的语法。使用状态和类方法来定义 React 类组件的一种方法如下：
class Counter extends Component { constructor(props) { super(props); this.state = { counter: 0, }; this.onIncrement = this.onIncrement.bind(this); this.onDecrement = this.onDecrement.bind(this); } onIncrement() { this.setState(state => ({ counter: state.counter + 1 })); } onDecrement() { this.setState(state => ({ counter: state.counter - 1 })); } render() { return ( {this.state.counter}
Increment Decrement ); } }不过，在实现大量的 React 类组件时，构造函数中的类方法绑定和构造函数本身就变成了繁琐的实现细节。所运的是，有一个简短的语法可用来摆脱这两个烦恼：
class Counter extends Component { state = { counter: 0, }; onIncrement = () => { this.setState(state => ({ counter: state.counter + 1 })); } onDecrement = () => { this.setState(state => ({ counter: state.counter - 1 })); } render() { return ( {this.state.counter}
Increment Decrement ); } }通过使用 JavaScript 箭头函数，可以自动绑定类方法，不需要在构造函数中绑定它们。通过将状态直接定义为类属性，在不使用 props 时就可以省略构造函数。（注意：请注意，JavaScript 还不支持类属性。）因此，你可以说这种定义 React 类组件的方式比其他版本更简洁。
React 中的模板字面量
模板字面量是 JavaScript ES6 附带的另一种 JavaScript 语言特性。之所以提到这个特性，是因为当 JavaScript 和 React 新手看到它们时，可能会感到困惑。以下面的连接字符串的语法为例：
function getGreeting(what) { return 'Welcome to ' + what; } const greeting = getGreeting('JavaScript'); console.log(greeting); // Welcome to JavaScript模板字面量可以用于达到相同的目的，被称为字符串插值：
function getGreeting(what) { return `Welcome to ${what}`; }你只需使用反引号和 ${}来插入 JavaScript 原语。字符串字面量不仅可用于字符串插值，还可用于多行字符串：
function getGreeting(what) { return ` Welcome to ${what} `; }这样就可以格式化多行文本块。
React 中 Map、Reduce 和 Filter
在向 React 新手教授 JSX 语法时，我通常会先在 render() 方法中定义一个变量，然后将其用在返回代码块中。
import React, { Component } from 'react'; class App extends Component { render() { var greeting = 'Welcome to React'; return ( {greeting}
); } } export default App;你只需使用花括号来操作 HTML 中的 JavaScript。不管是渲染字符串还是渲染一个复杂的对象，并没有太大不同。
import React, { Component } from 'react'; class App extends Component { render() { var user = { name: 'Robin' }; return ( {user.name}
); } } export default App;接下来的问题是：如何渲染项目列表？React 没有提供特定的 API（例如 HTML 标记的自定义属性）用于渲染项目列表。我们可以使用纯 JavaScript 代码来迭代项目列表，并返回每个项目的 HTML。
import React, { Component } from 'react'; class App extends Component { render() { var users = [ { name: 'Robin' }, { name: 'Markus' }, ]; return ( - {users.map(function (user) { return
- {user.name} ; })}
通过使用 JavaScript 箭头函数，你可以摆脱箭头函数体和 return 语句，让渲染输出更加简洁。
import React, { Component } from 'react'; class App extends Component { render() { var users = [ { name: 'Robin' }, { name: 'Markus' }, ]; return ( - {users.map(user =>
- {user.name} )}
很快，每个 React 开发人员都习惯了 JavaScript 内置的 map() 方法。对数组进行 map 并返回每个项的渲染输出，这样做非常有用。在某系情况下，结合使用 filter() 或 reduce() 会更有用，而不只是为每个被 map 的项渲染输出。
import React, { Component } from 'react'; class App extends Component { render() { var users = [ { name: 'Robin', isDeveloper: true }, { name: 'Markus', isDeveloper: false }, ]; return ( - {users .filter(user => user.isDeveloper) .map(user =>
- {user.name} ) }
通常，React 开发人员习惯于使用 JavaScript 的这些内置函数，而不必使用 React 特定的 API。它只是 HTML 中的 JavaScript。
React 中的 var、let 和 const
对于 React 的新手来说，使用 var、let 和 const 来声明变量可能也会给他们造成混淆，虽然它们不是 React 相关的。我会尝试在教学中尽早介绍 let 和 const，并从在 React 组件中交替使用 const 和 var 开始：
import React, { Component } from 'react'; class App extends Component { render() { const users = [ { name: 'Robin' }, { name: 'Markus' }, ]; return ( - {users.map(user =>
- {user.name} )}
然后我给出了一些使用这些变量声明的经验法则：
（1）不要使用 var，因为 let 和 const 更具体
（2）默认使用 const，因为它不能被重新分配或重新声明
（3）如果要重新赋值变量则使用 let
let 通常用于 for 循环中，const 通常用于保持 JavaScript 变量不变。尽管在使用 const 时可以修改对象和数组的内部属性，但变量声明表达了保持变量不变的意图。
React 中的三元运算符
如果要通过 if-else 语句进行条件渲染该怎么办？我们不能直接在 JSX 中使用 if-else 语句，但可以从渲染函数中提前返回。如果不需要显示内容，返回 null 在 React 中是合法的。
import React, { Component } from 'react'; class App extends Component { render() { const users = [ { name: 'Robin' }, { name: 'Markus' }, ]; const showUsers = false; if (!showUsers) { return null; } return ( - {users.map(user =>
- {user.name} )}
不过，如果要在返回的 JSX 中使用 if-else 语句，可以使用 JavaScript 的三元运算符：
import React, { Component } from 'react'; class App extends Component { render() { const users = [ { name: 'Robin' }, { name: 'Markus' }, ]; const showUsers = false; return ( { showUsers ? ( {users.map(user => - {user.name}
)}
) : ( null ) } ); } } export default App;如果你只返回条件渲染的一个方面，可以使用 && 运算符：
import React, { Component } from 'react'; class App extends Component { render() { const users = [ { name: 'Robin' }, { name: 'Markus' }, ]; const showUsers = false; return ( { showUsers && ( {users.map(user => - {user.name}
)}
) } ); } } export default App;详细的原理我就不说了，但如果你感兴趣，可以在这篇文章（https://www.robinwieruch.de/conditional-rendering-react/）里了解到更详细的信息以及与条件渲染相关的其他技术。React 中的条件渲染告诉我们，大多数 React 都是与 JavaScript 有关，而不是 React 特定的内容。
React 中的导入和导出语句
在 JavaScript 中，我们可以通过 import 和 export 语句来导入和导出在 JavaScript ES6 文件中定义的功能。
在开始你的***个 React 应用程序之前，这些 import 和 export 语句是另一个需要了解的话题。create-react-app 项目已经在使用 import 语句：
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( Welcome to React To get started, edit src/App.js and save to reload.