学习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://geek.zshipu.com/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