在开始React之前,你需要学好这些JavaScript

开发 前端
我在给别人培训 React 的过程中得出这样的一个结论:React 完全是关于 JavaScript 的。这篇文章列出了大部分有用的 JavaScript 特性,将在你学习 React 的过程中助你一臂之力。

[[240980]]

我在给别人培训 React 的过程中得出这样的一个结论:React 完全是关于 JavaScript 的。而且,有很多材料是关于 JavaScript 而不是 React。其中大部分是 JavaScript ES6 及其特性和语法,还包括三元运算符、简化的语法、this 对象、JavaScript 内置函数(map、reduce、filter)或更一般的概念,如可组合性、可重用性、不变性或高阶函数。在刚开始接触 React 之前,你可能不需要掌握这些基础知识,但在学习或实践过程中肯定需要用到它们。这篇文章列出了大部分有用的 JavaScript 特性,将在你学习 React 的过程中助你一臂之力。

在开始 React 之前先学习 JavaScript

当你开始进入 React 的世界,create-react-app(https://github.com/facebook/create-react-app)通常会是你的***个 React 项目。在搭建好项目后,你将看到下面的这个 React 类组件: 

  1. import React, { Component } from 'react' 
  2. import logo from './logo.svg' 
  3. import './App.css' 
  4. class App extends Component {  
  5.   render() {  
  6.     return (  
  7.       <div className="App" 
  8.         <header className="App-header" 
  9.           <img src={logo} className="App-logo" alt="logo" />  
  10.           <h1 className="App-title">Welcome to React</h1>  
  11.         </header>  
  12.         <p className="App-intro" 
  13.           To get started, edit <code>src/App.js</code> and save to reload. 
  14.         </p>  
  15.       </div>  
  16.     );  
  17.   } 
  18.   
  19. export default App; 

React 类组件可能不是***的入手点。新手有许多东西需要消化,不一定与 React 有关:类语句、类方法和继承。导入语句也会在学习 React 时增加额外的复杂性。尽管主要焦点应该放在 JSX(React 的语法)上,但其他的东西也需要解释一番。这篇文章主要针对 JavaScript,所以请不用太担心 React 相关的内容。

React 和 JavaScript 类

关于 React 类组件,需要用到有关 JavaScript 类的先验知识。JavaScript 类的概念相对较新。之前,只有 JavaScript 的原型链可用于实现继承。JavaScript 类以原型继承为基础,让继承体系变得更简单。

定义 React 组件的一种方法是使用 JavaScript 类。 

  1. class Developer {  
  2.   constructor(firstname, lastname) {  
  3.     this.firstname = firstname;  
  4.     this.lastname = lastname;  
  5.   }  
  6.   getName() {  
  7.     return this.firstname + ' ' + this.lastname;  
  8.   }  
  9.  
  10.  
  11. var me = new Developer('Robin''Wieruch');  
  12. console.log(me.getName()); 

一个类描述了一个实体,用于创建实体的实例。在使用 new 语句创建类的实例时,会调用这个类的构造函数。类的属性通常位于构造函数中。此外,类方法(例如 getName())用于读取(或写入)实例的数据。类的实例在类中使用 this 对象来表示,但在外部,仅指定给 JavaScript 变量。

在面向对象编程中,类通常用来实现继承。在 JavaScript 中也一样,extends 语句可用于让一个类继承另一个类。一个子类通过 extends 语句继承了一个父类的所有功能,还可以添加自己的功能。 

  1. class Developer {  
  2.   constructor(firstname, lastname) {  
  3.     this.firstname = firstname;  
  4.     this.lastname = lastname;  
  5.   } 
  6.   getName() { 
  7.      return this.firstname + ' ' + this.lastname;  
  8.   }  
  9.  
  10. class ReactDeveloper extends Developer {  
  11.   getJob() {  
  12.     return 'React Developer' 
  13.   } 
  14.    
  15.  
  16. var me = new ReactDeveloper('Robin''Wieruch');  
  17.  
  18. console.log(me.getName());  
  19. console.log(me.getJob()); 

 基本上,要理解 React 的类组件,知道这些就够了。JavaScript 类用于定义 React 组件,React 组件继承了从 React 包导入的 React Component 类的所有功能。 

  1. import React, { Component } from 'react' 
  2. class App extends Component {  
  3.   render() {  
  4.     return (  
  5.       <div>  
  6.         <h1>Welcome to React</h1>  
  7.       </div>  
  8.     );  
  9.   }  
  10.  
  11.  
  12. export default App; 

这就是为什么 render() 方法在 React 类组件中是必需的:从 React 包导入的 React Component 用它在浏览器中显示某些内容。此外,如果不从 React Component 继承,将无法使用其他生命周期方法(包括 render() 方法)。例如,如果不继承,那么 componentDidMount() 生命周期方法就不存在,因为现在这个类只是一个普通 JavaScript 类的实例。除了生命周期方法不可用,React 的 API 方法(例如用于本地状态管理的 this.setState())也不可用。

我们可以通过 JavaScript 类来扩展通用类的行为。因此,我们可以引入自己的类方法或属性。 

  1. import React, { Component } from 'react'
  2.  
  3. class App extends Component {  
  4.   getGreeting() {  
  5.     return 'Welcome to React' 
  6.   }  
  7.  
  8.   render() {  
  9.     return (  
  10.       <div>  
  11.         <h1>{this.getGreeting()}</h1>  
  12.       </div>  
  13.     );  
  14.   }  
  15.  
  16.  
  17. 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 向函数式编程更近了一步。 

  1. // JavaScript ES5 function  
  2. function getGreeting() {  
  3.   return 'Welcome to JavaScript' 
  4.  
  5.  
  6. // JavaScript ES6 arrow function with body  
  7. const getGreeting = () => {  
  8.   return 'Welcome to JavaScript' 
  9.  
  10.  
  11. // JavaScript ES6 arrow function without body and implicit return  
  12. const getGreeting = () =>  
  13.   '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 组件的方式。那么,如果可以像函数那样使用组件,将会怎样? 

  1. function (props) {  
  2.   return view 

这是一个接收输入(例如 props)并返回 HTML 元素(视图)的函数。它不需要管理任何状态(无状态),也不需要了解任何方法(类方法、生命周期方法)。这个函数只需要使用 React 组件的 render() 方法来进行渲染。 

  1. function Greeting(props) {  
  2.   return <h1>{props.greeting}</h1>;  

功能无状态组件是在 React 中定义组件的***方法。它们的样板代码较少,复杂性较低,并且比 React 类组件更易于维护。不过,这两者都有自己存在的理由。

之前提到了 JavaScript 箭头函数以及它们可以提升代码的可读性,现在让我们将这些函数应用无状态组件中。之前的 Greeting 组件在 JavaScript ES5 和 ES6 中的写法有点不一样: 

  1. // JavaScript ES5 function  
  2. function Greeting(props) {  
  3.   return <h1>{props.greeting}</h1>;  
  4.  
  5.  
  6. // JavaScript ES6 arrow function  
  7. const Greeting = (props) => {  
  8.   return <h1>{props.greeting}</h1>;  
  9.  
  10. // JavaScript ES6 arrow function without body and implicit return  
  11. const Greeting = (props) =>  
  12.   <h1>{props.greeting}</h1> 

JavaScript 箭头函数是让 React 无状态组件保持简洁的一个不错的方法。

React 类组件语法

React 定义组件的方式一直在演化。在早期阶段,React.createClass() 方法是创建 React 类组件的默认方式。现在不再使用这个方法,因为随着 JavaScript ES6 的兴起,之前的 React 类组件语法成为默认语法。

不过,JavaScript 也在不断发展,因此 JavaScript 爱好者一直在寻找新的方式。这就是为什么你会发现 React 类组件使用了不同的语法。使用状态和类方法来定义 React 类组件的一种方法如下: 

  1. class Counter extends Component {  
  2.   constructor(props) {  
  3.     super(props);  
  4.  
  5.     this.state = {  
  6.       counter: 0,  
  7.     };  
  8.  
  9.     this.onIncrement = this.onIncrement.bind(this);  
  10.     this.onDecrement = this.onDecrement.bind(this);  
  11.   }  
  12.   onIncrement() {  
  13.     this.setState(state => ({ counter: state.counter + 1 }));  
  14.   } 
  15.  
  16.   onDecrement() {  
  17.     this.setState(state => ({ counter: state.counter - 1 }));  
  18.   }  
  19.  
  20.   render() {  
  21.     return (  
  22.       <div>  
  23.         <p>{this.state.counter}</p>  
  24.  
  25.         <button onClick={this.onIncrement} type="button">Increment</button>  
  26.         <button onClick={this.onDecrement} type="button">Decrement</button>  
  27.       </div>  
  28.     );  
  29.   }  

不过,在实现大量的 React 类组件时,构造函数中的类方法绑定和构造函数本身就变成了繁琐的实现细节。所运的是,有一个简短的语法可用来摆脱这两个烦恼: 

  1. class Counter extends Component {  
  2.   state = {  
  3.     counter: 0,  
  4.   }; 
  5.  
  6.   onIncrement = () => {  
  7.     this.setState(state => ({ counter: state.counter + 1 }));  
  8.   } 
  9.  
  10.   onDecrement = () => {  
  11.     this.setState(state => ({ counter: state.counter - 1 }));  
  12.   }  
  13.  
  14.   render() {  
  15.     return (  
  16.       <div>  
  17.         <p>{this.state.counter}</p>   
  18.  
  19.         <button onClick={this.onIncrement} type="button">Increment</button>  
  20.         <button onClick={this.onDecrement} type="button">Decrement</button>  
  21.       </div>  
  22.     );  
  23.   }  

通过使用 JavaScript 箭头函数,可以自动绑定类方法,不需要在构造函数中绑定它们。通过将状态直接定义为类属性,在不使用 props 时就可以省略构造函数。(注意:请注意,JavaScript 还不支持类属性。)因此,你可以说这种定义 React 类组件的方式比其他版本更简洁。

React 中的模板字面量

模板字面量是 JavaScript ES6 附带的另一种 JavaScript 语言特性。之所以提到这个特性,是因为当 JavaScript 和 React 新手看到它们时,可能会感到困惑。以下面的连接字符串的语法为例: 

  1. function getGreeting(what) {  
  2.   return 'Welcome to ' + what;  
  3.  
  4. const greeting = getGreeting('JavaScript'); 
  5. console.log(greeting);  
  6. // Welcome to JavaScript 

模板字面量可以用于达到相同的目的,被称为字符串插值: 

  1. function getGreeting(what) {  
  2.   return `Welcome to ${what}`;  

你只需使用反引号和 ${}来插入 JavaScript 原语。字符串字面量不仅可用于字符串插值,还可用于多行字符串: 

  1. function getGreeting(what) {  
  2.   return `  
  3.     Welcome  
  4.     to  
  5.     ${what}  
  6.   `;  

这样就可以格式化多行文本块。

React 中 Map、Reduce 和 Filter

在向 React 新手教授 JSX 语法时,我通常会先在 render() 方法中定义一个变量,然后将其用在返回代码块中。 

  1. import React, { Component } from 'react' 
  2. class App extends Component {  
  3.   render() {  
  4.     var greeting = 'Welcome to React' 
  5.     return (  
  6.       <div>  
  7.         <h1>{greeting}</h1>  
  8.       </div>  
  9.     );  
  10.   }  
  11.  
  12.  
  13. export default App; 

你只需使用花括号来操作 HTML 中的 JavaScript。不管是渲染字符串还是渲染一个复杂的对象,并没有太大不同。 

  1. import React, { Component } from 'react' 
  2. class App extends Component {  
  3.   render() {  
  4.     var user = { name'Robin' };  
  5.     return (  
  6.       <div>  
  7.         <h1>{user.name}</h1>  
  8.       </div>  
  9.     );  
  10.   }  
  11.  
  12.  
  13. export default App; 

 接下来的问题是:如何渲染项目列表?React 没有提供特定的 API(例如 HTML 标记的自定义属性)用于渲染项目列表。我们可以使用纯 JavaScript 代码来迭代项目列表,并返回每个项目的 HTML。 

  1. import React, { Component } from 'react' 
  2. class App extends Component {  
  3.   render() {  
  4.     var users = [  
  5.       { name'Robin' },  
  6.       { name'Markus' },  
  7.     ];  
  8.     return (  
  9.       <ul>  
  10.         {users.map(function (user) {  
  11.           return <li>{user.name}</li>;  
  12.         })}  
  13.       </ul>  
  14.     );  
  15.   }  
  16.  
  17. export default App; 

 通过使用 JavaScript 箭头函数,你可以摆脱箭头函数体和 return 语句,让渲染输出更加简洁。 

  1. import React, { Component } from 'react' 
  2. class App extends Component {  
  3.   render() {  
  4.     var users = [  
  5.       { name'Robin' },  
  6.       { name'Markus' },  
  7.     ];  
  8.     return (  
  9.       <ul>  
  10.         {users.map(user => <li>{user.name}</li>)}  
  11.       </ul>  
  12.     );  
  13.   }  
  14.  
  15. export default App; 

很快,每个 React 开发人员都习惯了 JavaScript 内置的 map() 方法。对数组进行 map 并返回每个项的渲染输出,这样做非常有用。在某系情况下,结合使用 filter() 或 reduce() 会更有用,而不只是为每个被 map 的项渲染输出。 

  1. import React, { Component } from 'react' 
  2. class App extends Component {  
  3.   render() {  
  4.     var users = [  
  5.       { name'Robin', isDeveloper: true },  
  6.       { name'Markus', isDeveloper: false },  
  7.     ];  
  8.     return (  
  9.       <ul>  
  10.         {users  
  11.           .filter(user => user.isDeveloper)  
  12.           .map(user => <li>{user.name}</li>)  
  13.         }  
  14.       </ul>  
  15.     );  
  16.   }  
  17.  
  18.  
  19. export default App; 

通常,React 开发人员习惯于使用 JavaScript 的这些内置函数,而不必使用 React 特定的 API。它只是 HTML 中的 JavaScript。

React 中的 var、let 和 const

对于 React 的新手来说,使用 var、let 和 const 来声明变量可能也会给他们造成混淆,虽然它们不是 React 相关的。我会尝试在教学中尽早介绍 let 和 const,并从在 React 组件中交替使用 const 和 var 开始: 

  1. import React, { Component } from 'react' 
  2. class App extends Component { 
  3.    render() {  
  4.     const users = [  
  5.       { name'Robin' },  
  6.       { name'Markus' },  
  7.     ];  
  8.     return (  
  9.       <ul>  
  10.         {users.map(user => <li>{user.name}</li>)}  
  11.       </ul>  
  12.     ); 
  13.    }  
  14.  
  15. export default App; 

然后我给出了一些使用这些变量声明的经验法则:

(1)不要使用 var,因为 let 和 const 更具体

(2)默认使用 const,因为它不能被重新分配或重新声明

(3)如果要重新赋值变量则使用 let

let 通常用于 for 循环中,const 通常用于保持 JavaScript 变量不变。尽管在使用 const 时可以修改对象和数组的内部属性,但变量声明表达了保持变量不变的意图。

React 中的三元运算符

如果要通过 if-else 语句进行条件渲染该怎么办?我们不能直接在 JSX 中使用 if-else 语句,但可以从渲染函数中提前返回。如果不需要显示内容,返回 null 在 React 中是合法的。 

  1. import React, { Component } from 'react' 
  2. class App extends Component { 
  3.    render() {  
  4.     const users = [  
  5.       { name'Robin' }, 
  6.       { name'Markus' },  
  7.     ];  
  8.     const showUsers = false 
  9.     if (!showUsers) {  
  10.       return null 
  11.     } 
  12.  
  13.     return (  
  14.       <ul>  
  15.         {users.map(user => <li>{user.name}</li>)}  
  16.       </ul>  
  17.     ); 
  18.    }  
  19.   
  20.  
  21. export default App; 

不过,如果要在返回的 JSX 中使用 if-else 语句,可以使用 JavaScript 的三元运算符: 

  1. import React, { Component } from 'react' 
  2. class App extends Component {  
  3.   render() {  
  4.     const users = [  
  5.       { name'Robin' },  
  6.       { name'Markus' },  
  7.     ]; 
  8.  
  9.     const showUsers = false 
  10.     return (  
  11.       <div>  
  12.         {  
  13.           showUsers ? (  
  14.             <ul>  
  15.               {users.map(user => <li>{user.name}</li>)}  
  16.             </ul>  
  17.           ) : (  
  18.             null  
  19.           )  
  20.         } 
  21.        </div>  
  22.     );  
  23.   }  
  24.  
  25. export default App; 

如果你只返回条件渲染的一个方面,可以使用 && 运算符:

  1. import React, { Component } from 'react'
  2.  
  3. class App extends Component { 
  4.  
  5.   render() { 
  6.  
  7.     const users = [ 
  8.  
  9.       { name'Robin' }, 
  10.  
  11.       { name'Markus' }, 
  12.  
  13.     ]; 
  14.  
  15.     const showUsers = false 
  16.  
  17.     return ( 
  18.  
  19.       <div> 
  20.  
  21.         { 
  22.  
  23.           showUsers && (  
  24.             <ul>  
  25.               {users.map(user => <li>{user.name}</li>)}  
  26.             </ul>  
  27.           ) 
  28.          }  
  29.       </div>  
  30.     );  
  31.   }  
  32.  
  33. 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 语句: 

  1. import React, { Component } from 'react' 
  2. import logo from './logo.svg' 
  3. import './App.css' 
  4. class App extends Component {  
  5.   render() {  
  6.     return (  
  7.       <div className="App" 
  8.         <header className="App-header" 
  9.           <img src={logo} className="App-logo" alt="logo" />  
  10.           <h1 className="App-title">Welcome to React</h1>  
  11.         </header>  
  12.         <p className="App-intro" 
  13.           To get started, edit <code>src/App.js</code> and save to reload.  
  14.         </p>  
  15.       </div>  
  16.     );  
  17.   }  
  18.  
  19.  
  20. export default App; 

这对初始项目来说非常棒,因为它为你提供了一个全面的体验,可以导入和导出其他文件。不过,在刚开始接触 React 时,我会试着避免这些导入。相反,我会专注于 JSX 和 React 组件。在需要将 React 组件或 JavaScript 函数分离到单独的文件中时,才需要引入导入和导出语句。

那么这样使用这些导入和导出语句呢?假设你想要导出一个文件的如下变量: 

  1. const firstname = 'Robin' 
  2. const lastname = 'Wieruch' 
  3. export { firstname, lastname }; 

然后,你可以通过***个文件的相对路径将它们导入到另一个文件中: 

  1. import { firstname, lastname } from './file1.js' 
  2. console.log(firstname);  
  3. // output: Robin 

因此,它不一定只是与导入或导出组件或函数有关,它可以是共享可分配给变量的所有东西(我们只谈 JS)。你还可以将另一个文件导出的所有变量作为一个对象导入: 

  1. import * as person from './file1.js' 
  2. console.log(person.firstname);  
  3. // output: Robin 

导入可以有别名。当从多个文件导入具有相同导出名称的功能时,就需要用到别名。 

  1. import { firstname as username } from './file1.js' 
  2. console.log(username);  
  3. // output: Robin 

之前所有的例子都是命名的导入和导出。除此之外,还有默认的导入和导出。它可以用于以下一些场景:

  • 导出和导入单个功能;
  • 强调一个模块导出 API 的主要功能;
  • 作为导入功能的后备。 
  1. const robin = {  
  2.   firstname: 'Robin' 
  3.   lastname: 'Wieruch' 
  4. };  
  5. export default robin; 

在使用默认导入时可以省略大括号: 

  1. import developer from './file1.js' 
  2. console.log(developer);  
  3. // output: { firstname: 'Robin', lastname: 'Wieruch' } 

此外,导入名称可以与导出的默认名称不同。你还可以将它与命名的 export 和 import 语句一起使用: 

  1. const firstname = 'Robin' 
  2. const lastname = 'Wieruch' 
  3. const person = {  
  4.   firstname,  
  5.   lastname,  
  6. };  
  7. export {  
  8.   firstname,  
  9.   lastname,  
  10. };  
  11. export default person; 

在另一个文件中导入: 

  1. import developer, { firstname, lastname } from './file1.js' 
  2. console.log(developer);  
  3. // output: { firstname: 'Robin', lastname: 'Wieruch' }  
  4. console.log(firstname, lastname);  
  5. // output: Robin Wieruch 

你还可以节省一些行,直接导出命名的变量: 

  1. export const firstname = 'Robin' 
  2. export const lastname = 'Wieruch'

这些是 ES6 模块的主要功能。它们可以帮助你更好地组织代码,并设计出可重用的模块 API。

React 中的库

React 只是应用程序的视图层。React 提供了一些内部状态管理,但除此之外,它只是一个为浏览器渲染 HTML 的组件库。API(例如浏览器 API、DOM API)、JavaScript 或外部库可以为 React 添加额外的东西。为 React 应用程序选择合适的库并不是件容易的事,但一旦你对不同的库有了很好的了解,就可以选择最适合你的技术栈的库。

例如,我们可以使用 React 原生的获取数据的 API 来获取数据: 

  1. import React, { Component } from 'react' 
  2. class App extends Component {  
  3.   state = {  
  4.     data: null 
  5.   };  
  6.   componentDidMount() {  
  7.     fetch('https://api.mydomain.com' 
  8.       .then(response => response.json()) 
  9.       .then(data => this.setState({ data }));  
  10.   }   
  11.  
  12.   render() {  
  13.     ...  
  14.   }  
  15.  
  16. export default App; 

但你也可以使用另一个库来获取数据,Axios 就是这样的一个流行库: 

  1. import React, { Component } from 'react' 
  2. import axios from 'axios' 
  3. class App extends Component {  
  4.   state = {  
  5.     data: null 
  6.   };  
  7.   componentDidMount() {  
  8.     axios.get('https://api.mydomain.com' 
  9.       .then(data => this.setState({ data }));  
  10.   } 
  11.  
  12.   render() {  
  13.     ...  
  14.   }  
  15.  
  16. export default App; 

因此,一旦你知道了需要解决什么问题,React 的生态系统就可以为你提供大量的解决方案。这可能与 React 本身无关,而是有关了解如何选择可用于弥补 React 应用程序的各种 JavaScript 库。

React 中的高阶函数

高阶函数是函数式编程中的一个非常棒的概念。在 React 中,了解这些函数是非常有意义的,因为在某些时候你需要处理高阶组件,如果已经了解了高阶函数,那么就可以更好地了解这些高阶组件。

我们假设可以根据一个输入字段的值对用户列表进行过滤。 

  1. import React, { Component } from 'react' 
  2. class App extends Component {  
  3.   state = {  
  4.     query: '' 
  5.   };  
  6.   onChange = event => {  
  7.     this.setState({ query: event.target.value });  
  8.   }  
  9.   render() {  
  10.     const users = [  
  11.       { name'Robin' },  
  12.       { name'Markus' },  
  13.     ];  
  14.     return (  
  15.       <div>  
  16.         <ul>  
  17.           {users  
  18.             .filter(user => this.state.query === user.name 
  19.             .map(user => <li>{user.name}</li>)  
  20.           }  
  21.         </ul>  
  22.         <input  
  23.           type="text"  
  24.           onChange={this.onChange}  
  25.         />  
  26.       </div>  
  27.     );  
  28.   }  
  29.  
  30. export default App; 

我们并不总是希望通过提取函数的方式来实现,因为这样会增加不必要的复杂性。但是,通过提取函数,我们可以对其进行单独的测试。因此,让我们使用内置的 filter 函数来实现这个例子。 

  1. import React, { Component } from 'react' 
  2. function doFilter(user) {  
  3.   return query === user.name 
  4.  
  5. class App extends Component {  
  6.   ...  
  7.   render() {  
  8.     const users = [  
  9.       { name'Robin' },  
  10.       { name'Markus' },  
  11.     ]; 
  12.  
  13.     return (  
  14.       <div>  
  15.         <ul>  
  16.           {users  
  17.             .filter(doFilter)  
  18.             .map(user => <li>{user.name}</li>)  
  19.           }  
  20.         </ul>  
  21.         <input  
  22.           type="text"  
  23.           onChange={this.onChange}  
  24.         />  
  25.       </div>  
  26.     );  
  27.   }  
  28.  
  29.  
  30. export default App; 

这个实现还起不到作用,因为 doFilter() 函数需要知道 state 的 query 属性。我们可以通过另一个包装函数来传递它,也就是高阶函数。 

  1. import React, { Component } from 'react' 
  2. function doFilter(query) {  
  3.   return function (user) {  
  4.     return query === user.name 
  5.   }  
  6.  
  7.  
  8. class App extends Component {  
  9.   ...  
  10.  
  11.   render() {  
  12.     const users = [  
  13.       { name'Robin' },  
  14.       { name'Markus' },  
  15.     ];  
  16.  
  17.     return (  
  18.       <div>  
  19.         <ul>  
  20.           {users  
  21.             .filter(doFilter(this.state.query))  
  22.             .map(user => <li>{user.name}</li>)  
  23.           }  
  24.         </ul>  
  25.         <input  
  26.           type="text"  
  27.           onChange={this.onChange}  
  28.         />  
  29.       </div>  
  30.     );  
  31.   } 
  32.   
  33. export default App; 

基本上,高阶函数是可以返回函数的函数。通过使用 JavaScript ES6 的箭头函数,你可以让高阶函数变得更简洁。此外,这种简化的方式让将函数组合成函数变得更吸引人。 

  1. const doFilter = query => user =>  
  2.   query === user.name

现在可以将 doFilter() 函数从文件中导出,并将其作为纯(高阶)函数进行单独的测试。在了解了高阶函数之后,就为学习 React 的高阶组件奠定了基础。

将这些函数提取到 React 组件之外的(高阶)函数中也助于单独测试 React 的本地状态管理。 

  1. export const doIncrement = state =>  
  2.   ({ counter: state.counter + 1 });    
  3. export const doDecrement = state =>  
  4.   ({ counter: state.counter - 1 });  
  5. class Counter extends Component {  
  6.   state = {  
  7.     counter: 0,  
  8.   };  
  9.   onIncrement = () => {  
  10.     this.setState(doIncrement);  
  11.   }  
  12.   onDecrement = () => {  
  13.     this.setState(doDecrement);  
  14.   } 
  15.  
  16.   render() {  
  17.     return (  
  18.       <div>  
  19.         <p>{this.state.counter}</p>  
  20.  
  21.         <button onClick={this.onIncrement} type="button">Increment</button>  
  22.         <button onClick={this.onDecrement} type="button">Decrement</button>  
  23.       </div>  
  24.     );  
  25.   }  

函数式编程非常强大,转向函数式编程有助于了解 JavaScript 将函数作为一等公民所带来的好处。

React 中的解构和展开运算符

JavaScript 中引入的另一种语言特性称为解构。通常情况下,你需要在组件的 state 或 props 中访问大量的属性。你可以在 JavaScript 中使用解构赋值,而不是逐个将它们分配给变量。 

  1. // no destructuring  
  2. const users = this.state.users;  
  3. const counter = this.state.counter;  
  4. // destructuring  
  5. const { users, counter } = this.state; 

这对函数式无状态组件来说特别有用,因为它们可以在函数签名中收到 props 对象。通常,你用到的不是 props,而是 props 里的内容,因此你可以对函数签名中已有的内容进行解构。 

  1. // no destructuring  
  2. function Greeting(props) {  
  3.   return <h1>{props.greeting}</h1>;  
  4.  
  5. // destructuring 
  6. function Greeting({ greeting }) {  
  7.   return <h1>{greeting}</h1>;  

解构也适用于 JavaScript 数组。另一个很棒的特性是剩余解构。它通常用于拆分对象的一部分属性,并将剩余属性保留在另一个对象中。 

  1. // rest destructuring  
  2. const { users, ...rest } = this.state; 

uesrs 可以在 React 组件中渲染,而剩余状态可以用在其他地方。这就是 JavaScript 展开(spread)运算发挥作用的地方,它可以将对象的剩余部分转到下一个组件。

JavaScript 多过 React

React 只提供了一个细小的 API 表面区域,因此开发人员必须习惯于 JavaScript 提供的所有功能。这句话并非没有任何理由:“成为 React 开发者也会让你成为更好的 JavaScript 开发者”。让我们通过重构一个高阶组件来回顾一下学到的 JavaScript 的一些方面。 

  1. function withLoading(Component) {  
  2.   return class WithLoading extends {  
  3.     render() {  
  4.       const { isLoading, ...props } = this.props;  
  5.   
  6.       if (isLoading) {  
  7.         return <p>Loading</p>;  
  8.       } 
  9.  
  10.       return <Component { ...props } />;  
  11.     }  
  12.   }  
  13.   };  

这个高阶组件用于显示条件加载进度条,当 isLoading 被设为 true 时,就可以显示加载进度条,否则就渲染输入组件。在这里可以看到(剩余)解构和展开运算符的实际应用。后者可以在渲染的 Component 中看到,因为 props 对象的剩余属性被传给了那个 Component。

让高阶组件变得更简洁的***步是将返回的 React 类组件重构为函数式无状态组件: 

  1. function withLoading(Component) {  
  2.   return function ({ isLoading, ...props }) {  
  3.     if (isLoading) {  
  4.       return <p>Loading</p>;  
  5.     }  
  6.     return <Component { ...props } />;  
  7.   };  

可以看到,剩余解构也可以被用在函数的签名中。接下来,使用 JavaScript ES6 箭头函数让高阶组件变得更加简洁: 

  1. const withLoading = Component => ({ isLoading, ...props }) => {    if (isLoading) {  
  2.     return <p>Loading</p>;    }   
  3.   return <Component { ...props } />; 
  4.  

通过使用三元运算符可以将函数体缩短为一行代码。因此可以省略函数体和 return 语句。 

  1. const withLoading = Component => ({ isLoading, ...props }) =>  
  2.   isLoading  
  3.     ? <p>Loading</p>  
  4.     : <Component { ...props } /> 

如你所见,高阶组件使用的是各种 JavaScript 而不是 React 相关技术:箭头函数、高阶函数、三元运算符、解构和展开运算符。

 英文原文:https://www.robinwieruch.de/javascript-fundamentals-react-requirements/ 

 

责任编辑:庞桂玉 来源: 前端之巅
相关推荐

2022-07-29 09:17:46

JavaScriptReactJS学习

2018-06-21 06:56:03

CASB云安全加密

2019-06-05 13:30:24

ReactJavaScript开发

2020-06-16 17:10:44

JavaScriptReact开发

2013-05-13 10:41:01

完全虚拟化服务器虚拟化基础设施

2021-02-03 13:22:53

区块链数据隐私

2022-08-23 09:48:13

面试JavaScriptoffer

2022-11-04 13:06:47

JVMJava程序

2020-04-27 10:56:44

边缘计算云计算网络

2019-03-01 08:37:25

物联网IOT互联网

2018-02-08 08:08:12

2018-04-27 14:58:09

Linuxkill命令

2015-07-27 17:54:49

Windows 10升级

2019-04-26 04:59:34

物联网边缘计算IOT

2023-01-03 09:00:52

React前端

2019-02-24 21:39:57

2018-07-20 17:11:56

云迁移云计算工具

2022-04-28 12:17:26

浏览器连字符hyphens

2018-05-16 09:41:13

神经网络NN函数

2020-10-14 14:44:51

iPhone 12苹果iPhone
点赞
收藏

51CTO技术栈公众号