学习React之前，JavaScript 基础知识
在深入了解 React 之前了解有关 JavaScript 和 Web 开发的所有信息。不幸的是， 我们生活在一个不完美的世界里， 所以在 React 之前对所有 JavaScript 进行大做笑只会让你流血。如果您已经拥有了一些 JavaScript 的经验，那么在 React 之前，您需要学习的只是用于开发 React 应用程序的 JavaScript 功能。关于JavaScript，在学习React之前，你应该对它感到自在：
这是20%的JavaScript功能，你将使用80%的时间，所以在本教程中，我将帮助您学习他们所有。
探索创建React应用程序
开始学习 React 的通常情况是运行包，它设置运行 React 所需的一切。然后，在过程完成后，打开将呈现我们整个应用程序中唯一的 React 类：create-react-app``````src/app.js
import React, { Component } from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;
class App extends Component { render() { return (
Edit src/App.js and save to reload.
export default App;
如果您以前从未学习过 ES6，你会认为此类语句是 React 的一个功能。它实际上是 ES6 的新功能，这就是为什么正确学习 ES6 使您能够更好地了解 React 代码的原因。我们将从 ES6 课程开始。
ES6 类
ES6 引入了类语法，其使用方式与 OO 语言（如 Java 或 Python）类似。ES6 中的基本类将看起来像：
class Developer {
constructor(name){
this.name = name;
}
hello(){ return ‘Hello World! I am ’ + this.name + ’ and I am a web developer’; } }
class语法后跟一个标识符（或简单名称），可用于创建新对象。该方法始终在对象初始化中调用。传递到对象的任何参数都将传递到新对象中。例如：constructor
var nathan = new Developer(‘Nathan’);
nathan.hello(); // Hello World! I am Nathan and I am a web developer
类可以定义尽可能多的方法，因为需要，在这种情况下，我们有返回字符串的方法。hello
类继承
类可以定义另一个类，从该类初始化的新对象将具有这两个类的所有方法。extends
class ReactDeveloper extends Developer {
installReact(){
return ‘installing React .. Done.’;
}
}
var nathan = new ReactDeveloper(‘Nathan’); nathan.hello(); // Hello World! I am Nathan and I am a web developer nathan.installReact(); // installing React .. Done.
另一个类通常称为_子类或__子类的_类，而正在扩展的类称为_父类或__超级类_。子类还可以_重写_父类中定义的方法，这意味着它将用定义的新方法替换方法定义。例如，让我们重写函数：extends``````hello
class ReactDeveloper extends Developer {
installReact(){
return ‘installing React .. Done.’;
}
hello(){ return ‘Hello World! I am ’ + this.name + ’ and I am a REACT developer’; } }
var nathan = new ReactDeveloper(‘Nathan’); nathan.hello(); // Hello World! I am Nathan and I am a REACT developer
给你。类中的方法已被覆盖。hello``````Developer
在React中使用
现在，我们了解 ES6 类和继承，我们可以理解 在 中定义的 React 类。这是一个 React 组件，但实际上只是一个正常的 ES6 类，它继承了从 React 包导入的 React 组件类的定义。src/app.js
import React, { Component } from ‘react’;
class App extends Component { // class content render(){ return (
Hello React!
) } }这使我们能够使用方法，JSX，其他方法。所有这些定义都在类中。但是，正如我们稍后将看到的，类并不是定义 React 组件的唯一方法。如果不需要状态和其他生命周期方法，可以改为使用函数。render()``````this.state``````Component
使用 ES6 和let``````const
由于 JavaScript 关键字全局声明变量，因此在 ES6 中引入了两个新的变量声明来解决此问题，即 和 。它们都是一样的，它们用于声明变量。区别在于不能在声明后更改其值，而可以。这两个声明都是本地的，这意味着如果在函数范围内声明，则不能在函数之外调用它。var``````let``````const``````const``````let``````let
const name = “David”;
let age = 28;
var occupation = “Software Engineer”;
使用哪一个？
经验法则是默认使用声明变量。稍后，当您撰写应用程序时，您将意识到需要更改的价值。这是您应该重构为 的时间。希望它能让你习惯新的关键字，并且你会开始识别应用程序中需要使用或 的模式。const``````const``````const``````let``````const``````let
我们什么时候在React中使用它？
每次我们需要变量。请考虑以下示例：
import React, { Component } from ‘react’;
class App extends Component { // class content render(){ const greeting = ‘Welcome to React’; return (
{greeting}
) } }由于问候语在整个应用程序生命周期中不会改变，因此我们使用此处定义它。const
箭头功能
Arrow 函数是一种新的 ES6 功能，在现代代码库中几乎被广泛使用，因为它使代码保持简洁和可读性。此功能允许我们使用较短的语法编写函数
// regular function
const testFunction = function() {
// content..
}
// arrow function const testFunction = () => { // content.. }
如果您是经验丰富的 JS 开发人员，则从常规函数语法移动到箭头语法可能首先会让人不舒服。当我学习箭头函数时，我使用这个简单的 2 个步骤来重写我的函数：
- 删除函数关键字
- 添加脂肪箭头符号后
=>``````()
括号仍用于传递参数，如果只有一个参数，可以省略括号。
const testFunction = (firstName, lastName) => {
return firstName+’ ‘+lastName;
}
const singleParam = firstName => { return firstName; }
隐式返回
如果您的箭头函数只有一行，则无需使用关键字和大括号即可返回值return``````{}
const testFunction = () => ‘hello there.’;
testFunction();
在React中使用
创建 React 组件的另一种方法是使用箭头函数。React采取箭头功能：
const HelloWorld = (props) => {
return {props.hello}
; }
相当于 ES6 类组件
class HelloWorld extends Component {
render() {
return (
{props.hello}
;
);
}
}
在 React 应用程序中使用箭头函数会使代码更加简洁。但它也会从组件中删除状态的使用。这种类型的组件称为无_状态功能组件_。您可以在许多 React 教程中找到该名称。
数组和对象的析构分配
ES6 中引入的最有用的新语法之一，解构赋值只是复制对象或数组的一部分，并将它们放入命名变量中。一个快速示例：
const developer = {
firstName: ‘Nathan’,
lastName: ‘Sebhastian’,
developer: true,
age: 25,
}
//destructure developer object const { firstName, lastName } = developer; console.log(firstName); // returns ‘Nathan’ console.log(lastName); // returns ‘Sebhastian’ console.log(developer); // returns the object
如您所看到的，我们将名字和姓氏从对象分配到新的变量 和 中。现在，如果要放入名为 ？ 的新变量，怎么办？developer``````firstName``````lastName``````firstName``````name
const { firstName:name } = developer;
console.log(name); // returns ‘Nathan’
解构也适用于数组，只有它使用索引而不是对象键：
const numbers = [1,2,3,4,5];
const [one, two] = numbers; // one = 1, two = 2
您可以通过 使用 传递来从析构中跳过某些索引：,
const [one, two, , four] = numbers; // one = 1, two = 2, four = 4
在React中使用
主要用于方法的析构，例如：state
reactFunction = () => {
const { name, email } = this.state;
};
或在功能无状态组件中，请考虑上一章中的示例：
const HelloWorld = (props) => {
return {props.hello}
; }
我们可以立即销毁参数：
const HelloWorld = ({ hello }) => {
return {hello}
; }
解构数组也用于 React 的挂钩：useState
const [user, setUser] = useState(’’);
地图和过滤器
尽管本教程重点介绍 ES6，但需要提及 JavaScript 数组和方法，因为它们可能是构建 React 应用程序时使用最多的 ES5 功能之一。特别是在处理数据方面。map``````filter
这两种方法在处理数据时使用得多。例如，假设从 API 结果提取返回 JSON 数据数组：
const users = [
{ name: ‘Nathan’, age: 25 },
{ name: ‘Jack’, age: 30 },
{ name: ‘Joe’, age: 28 },
];
然后，我们可以在 React 中呈现项目列表，如下所示：
import React, { Component } from ‘react’;
class App extends Component { // class content render(){ const users = [ { name: ‘Nathan’, age: 25 }, { name: ‘Jack’, age: 30 }, { name: ‘Joe’, age: 28 }, ];
return (
<ul>
{users
.map(user => <li>{user.name}</li>)
}
</ul>
)
} }
我们还可以筛选渲染中的数据。
{users
.filter(user => user.age > 26)
.map(user =>
ES6 模块系统
ES6 模块系统使 JavaScript 能够导入和导出文件。让我们再次查看代码，以便对此进行解释。src/app.js
import React, { Component } from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;
class App extends Component { render() { return (
Edit src/App.js and save to reload.
export default App;
在第一行代码中，我们看到导入语句：
import React, { Component } from ‘react’;
最后一行我们看到语句：export default
export default App;
为了理解这些语句，我们先讨论一下模块语法。
模块只是使用 关键字导出一个或多个值（可以是对象、函数或变量）的 JavaScript 文件。首先，创建一个在目录中命名的新文件export``````util.js``````src
touch util.js
然后在它里面写一个函数。这是默认导出
export default function times(x) {
return x * x;
}
或多个命名导出
export function times(x) {
return x * x;
}
export function plusTwo(number) { return number + 2; }
然后，我们可以导入它src/App.js
import { times, plusTwo } from ‘./util.js’;
console.log(times(2)); console.log(plusTwo(3));
每个模块可以有多个命名导出，但只能有一个默认导出。无需使用大括号和相应的导出函数名称即可导入默认导出：
// in util.js
export default function times(x) {
return x * x;
}
// in app.js import k from ‘./util.js’;
console.log(k(4)); // returns 16
但对于命名导出，必须使用大括号和确切名称进行导入。或者，导入可以使用别名来避免对两个不同的导入具有相同的名称：
// in util.js
export function times(x) {
return x * x;
}
export function plusTwo(number) { return number + 2; }
// in app.js import { times as multiplication, plusTwo as plus2 } from ‘./util.js’;
从绝对名称导入，如：
import React from ‘react’;
将使 JavaScript 检查相应的包名称。因此，如果要导入本地文件，不要忘记使用正确的路径。node_modules
在React中使用
显然，我们在文件中看到了这一点，然后在呈现导出组件的文件中看到了这一点。现在让我们忽略服务工部分。src/App.js``````index.js``````App
//index.js file
import React from ‘react’; import ReactDOM from ‘react-dom’; import ‘./index.css’; import App from ‘./App’; import * as serviceWorker from ‘./serviceWorker’;
ReactDOM.render(
// If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: http://bit.ly/CRA-PWA serviceWorker.unregister();
请注意如何从目录导入应用，并且已省略扩展名。只有在导入 JavaScript 文件时，我们才能删除文件扩展名，但我们必须将它包括在其他文件（如 ） 中。我们还导入另一个节点模块 ，这使我们能够将 React 组件呈现到 HTML 元素中。./App``````.js``````.css``````react-dom
对于 PWA，它是使 React 应用程序脱机工作的功能，但由于默认情况下禁用它，因此无需在开始时学习它。在您有足够的信心构建 React 用户界面后，最好学习 PWA。
结论
React 的厉害之处是，它不会像其他 Web 框架一样在 JavaScript 的上面添加任何外国抽象层。这就是为什么 React 在 JS 开发人员中变得非常流行。它只是使用最好的JavaScript，使构建用户界面更容易和可维护。React 应用程序中的 JavaScript 确实比 React specfix 语法更多，因此，一旦您更好地了解 JavaScript（尤其是 ES6），就可以自信地编写 React 应用程序。但这并不意味着您必须掌握有关 JavaScript 的一切才能开始编写 React 应用程序。现在就去写一个，随着机会的来，你将成为一个更好的开发人员。
- 原文作者：知识铺
- 原文链接：https://index.zshipu.com/geek/post/react/save01/%E5%AD%A6%E4%B9%A0React%E4%B9%8B%E5%89%8DJavaScript-%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/
- 版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可，非商业转载请注明出处（作者，原文链接），商业转载请联系作者获得授权。
- 免责声明：本页面内容均来源于站内编辑发布，部分信息来源互联网，并不意味着本站赞同其观点或者证实其内容的真实性，如涉及版权等问题，请立即联系客服进行更改或删除，保证您的合法权益。转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。也可以邮件至 sblig@126.com
