[译] 在你学习 React 之前必备的 JavaScript 基础
栏目: JavaScript · 发布时间: 5年前
内容简介:为了不浪费大家的宝贵时间,在开头申明一下,这篇文章针对的阅读对象是:没有写过在理想的状态下,你可以在深入了解React之前了解这是你将在
为了不浪费大家的宝贵时间,在开头申明一下,这篇文章针对的阅读对象是:没有写过 React
或者刚刚才接触 React
并且对于 ES6
的语法不太了解的同学,这是一篇基础入门的文章,在一开始我并没有准备翻译一篇这样的基础文章,但是在阅读完全文之后,我想起自己刚开始学习 React
时的迷茫, ES6
有那么多,我需要掌握多少呢?对于一个急于上手 React
写代码的人来说,这篇文章告诉你最基本要掌握的知识,让你快速的写起来。但是后期的提高,仍旧需要去夯实 Javascript
的基础。
前言
在理想的状态下,你可以在深入了解React之前了解 JavaScript
和 Web
开发的所有知识。 不幸的是,我们生活在一个不完美的世界,所以在 React
之前把所有的 JavaScript
都咀嚼一遍只会让你举步维艰。 如果你已经拥有一些 JavaScript
经验,那么在 React
之前你需要学习的只是实际用于开发 React
应用程序的 JavaScript
功能。 在学习 React
之前你应该学会的 JavaScript
的知识点:
-
ES6
类 -
使用
let
/const
声明变量 - 箭头函数
- 解构赋值
-
Map
和filter
-
ES6
模块系统
这是你将在 80%
的时间内使用的 20%
的 JavaScript
新特性,因此在本文中,我将帮助你学习所有这些特性。
创建 React
应用程序的探索
开始学习 React
的常见情况是运行 create-react-app
包,它会设置运行 React
所需的一切。 该过程完成之后,打开 src / app.js
这里给我们展示了整个应用程序中唯一的 React
类:
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } } export default App; 复制代码
如果之前你从未学习过 ES6
,那么你可能认为这个 class
语句是 React
的一个特性。 实际上这是 ES6
的一个新特性,这就是为什么正确学习 ES6
可以让你更好地理解 React
代码。 我们将从 ES6
的类开始。
ES6
的类
ES6
引入了 class
语法,类似于 Java
或 Python
等 OO
(面向对象) 语言。 ES6
中的基本类如下所示:
class Developer { constructor(name){ this.name = name; } hello(){ return 'Hello World! I am ' + this.name + ' and I am a web developer'; } } 复制代码
class
语法后跟一个可用于创建新对象的标识符(或一个名称)。 始终在对象初始化中调用构造函数方法。 传递给这个对象的任何参数都将传递给新对象。 例如:
var nathan = new Developer('Nathan'); nathan.hello(); // Hello World! I am Nathan and I am a web developer 复制代码
类可以定义任意它所需的方法,在这种情况下,我们定义了一个返回字符串的 hello
方法。
类继承
类可以扩展另一个类的定义,从该类初始化的新对象将具有这两个类的所有方法。
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. 复制代码
继承另一个类的类,通常称为 child
类或 sub
类,而正在扩展的类称为 parent
类或 super
类。 子类也可以覆盖父类中定义的方法,这意味着它将使用自己定义的新方法来替换父类方法的定义。 例如,让我们覆盖 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 复制代码
就这样,我们重写了 Developer
类中的 hello
方法。
在React 中使用
现在我们了解了 ES6
的类和继承,我们可以理解 src / app.js
中定义的 React
类。 这是一个 React
组件,但它实际上只是一个普通的 ES6
类,它继承了从 React
包导入的 React Component
类的定义。
import React, { Component } from 'react'; class App extends Component { // class content render(){ return ( <h1>Hello React!</h1> ) } } 复制代码
这使得我们能够使用 render()
方法, JSX
, this.state
和其他方法。 所有这些定义都在 Component
类中。 但正如我们稍后将看到的, class
不是定义 React Component
的唯一方法。 如果你不需要状态和其他生命周期方法,则可以使用函数。
使用 ES6
中的 let
和 const
来声明变量
因为 JavaScript
的 var
关键字是声明全局的变量,所以在 ES6
中引入了两个新的变量声明来解决这个问题,即 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 ( <h1>{greeting}</h1> ) } } 复制代码
在整个应用的生命周期中 greeting
并不会发生改变,所以我们在这里使用 const
箭头函数
箭头函数是 ES6
的一种新特性,在现代代码库中几乎被广泛使用,因为它使代码简洁易读。 它允许我们使用更短的语法编写函数。
// regular function const testFunction = function() { // content.. } // arrow function const testFunction = () => { // content.. } 复制代码
如果您是一位经验丰富的 JS
开发人员,那么从常规函数语法转换为箭头语法可能会让您感到不舒服。 当我学习箭头函数时,我用这两个简单的步骤来重写我的函数:
-
移除
function
关键字 -
在
()
后面加上=>
括号仍然用于传递参数,如果只有一个参数,则可以省略括号。
const testFunction = (firstName, lastName) => { return firstName+' '+lastName; } const singleParam = firstName => { return firstName; } 复制代码
隐藏的 return
如果箭头函数只有一行,则可以返回值而无需使用 return
关键字以及大括号。
const testFunction = () => 'hello there.'; testFunction(); 复制代码
在 React
中的使用
const HelloWorld = (props) => { return <h1>{props.hello}</h1>; } 复制代码
等同于 ES6
的类组件
class HelloWorld extends Component { render() { return ( <h1>{props.hello}</h1>; ); } } 复制代码
在 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 复制代码
如您所见,我们将开发人员对象中的 firstName
和 lastName
分配给新变量 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 <h1>{props.hello}</h1>; } 复制代码
我们可以立即简单地解构参数:
const HelloWorld = ({ hello }) => { return <h1>{hello}</h1>; } 复制代码
Map
和 filter
虽然本文侧重于 ES6
,但需要提及 JavaScript
数组 Map
和 filter
方法,因为它们可能是构建 React
应用程序时最常用的 ES5
功能之一。 特别是在处理数据上。
这两种方法在处理数据时使用得更多。 例如,假设从 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> ) } } 复制代码
我们同样可以在 render
中筛选数据
<ul> {users .filter(user => user.age > 26) .map(user => <li>{user.name}</li>) } </ul> 复制代码
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 ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } } export default App; 复制代码
在第一行代码中我们看到 import
语句:
import React, { Component } from 'react'; 复制代码
在第一行代码中我们看到 export default
语句:
export default App; 复制代码
要理解这些语句,我们先讨论模块语法。
模块只是一个 JavaScript
文件,它使用 export
关键字导出一个或多个值(可以是对象,函数或变量)。 首先,在 src
目录中创建一个名为 util.js
的新文件
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 export k from './util.js'; console.log(k(4)); // returns 16 复制代码
但是对于命名导出,必须使用花括号和确切名称导入。 或者,import可以使用别名来避免两个不同的导入具有相同的名称:
// 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
组件的呈现方式。 我们暂时忽略 serviceWorker
部分。
//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(<App />, document.getElementById('root')); // 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(); 复制代码
请注意如何从 ./App
目录导入 App
,并省略了 .js
扩展名。 我们只能在导入 JavaScript
文件时省略文件扩展名,但在其他文件中我们必须包含扩展名,例如 .css
。 我们还导入另一个 node
模块 react-dom
,这使我们能够将 React
组件呈现为 HTML
元素。
至于 PWA
,它是使 React
应用程序脱机工作的一项功能,但由于默认情况下它已被禁用,因此无需在开始时学习它。 在你有足够的信心构建 React
用户界面之后,最好学习 PWA
。
总结
React
的优点在于它不会像其他 Web
框架一样在 JavaScript
之上添加任何外部抽象层。 这就是为什么 React
变得非常受 JS
开发人员欢迎的原因。 它只是使用最好的 JavaScript
来使构建用户界面更容易和可维护。 在 React
应用程序中,确实有比 React specix
语法更多的 JavaScript
,所以一旦你更好地理解了 JavaScript
- 特别是 ES6
- 你就可以自信地编写 React
应用程序了。 但这并不意味着您必须掌握 JavaScript
的所有内容才能开始编写 React
应用程序。 现在去写一个,随着机会的到来,你将成为一个更好的开发者。
感谢阅读,我希望你学到一些新东西:)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 全栈必备 Redis基础
- Redis 基础知识总结(面试必备)
- Redis基础知识总结(面试必备)
- Python 面试必备基础知识-1
- Python 必备面试基础知识-3
- 编程必备基础-音视频小白系统入门课
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The Smashing Book
Jacob Gube、Dmitry Fadeev、Chris Spooner、Darius A Monsef IV、Alessandro Cattaneo、Steven Snell、David Leggett、Andrew Maier、Kayla Knight、Yves Peters、René Schmidt、Smashing Magazine editorial team、Vitaly Friedman、Sven Lennartz / 2009 / $ 29.90 / € 23.90
The Smashing Book is a printed book about best practices in modern Web design. The book shares technical tips and best practices on coding, usability and optimization and explores how to create succes......一起来看看 《The Smashing Book》 这本书的介绍吧!