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

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

10年积累的网站设计、网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有威宁免费网站建设让你可以放心的选择与我们合作。

在开始 React 之前先学习 JavaScript

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

 
 
 
    
  
  
  
  1. import React, { Component } from 'react'; 
    2. 
  
  
  
  2. import logo from './logo.svg'; 
    3. 
  
  
  
  3. import './App.css'; 
    4. 
  
  
  
  4. class App extends Component { 
    5. 
  
  
  
  5.   render() { 
    6. 
  
  
  
  6.     return ( 
    7. 
  
  
  
  7.        
    8. 
  
  
  
  8.          
    9. 
  
  
  
  9.            
    10. 
  
  
  
  10.           Welcome to React 
    11. 
  
  
  
  11.          
    12. 
  
  
  
  12.          
    13. 
  
  
  
  13.           To get started, edit src/App.js and save to reload.
    14. 
  
  
  
  14.         
     
    15. 
  
  
  
  15.       
 
  •     ); 
  •   }
  •  } 
  • export default App;

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

    React 和 JavaScript 类

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

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

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

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

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

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

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

     
 
 
      
  
  
  
    1. import React, { Component } from 'react'; 
      2. 
  
  
  
    2. class App extends Component { 
      3. 
  
  
  
    3.   render() { 
      4. 
  
  
  
    4.     return ( 
      5. 
  
  
  
    5.       
       
      6. 
  
  
  
    6.         
      Welcome to React
       
      7. 
  
  
  
    7.       
     
  •     ); 
  •   } 
  • } 
  • 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. 
  
  
  
    2. 
  
  
  
    3. class App extends Component { 
      4. 
  
  
  
    4.   getGreeting() { 
      5. 
  
  
  
    5.     return 'Welcome to React'; 
      6. 
  
  
  
    6.   } 
      7. 
  
  
  
    7. 
  
  
  
    8.   render() { 
      9. 
  
  
  
    9.     return ( 
      10. 
  
  
  
    10.       
       
      11. 
  
  
  
    11.         
      {this.getGreeting()}
       
      12. 
  
  
  
    12.       
     
  •     ); 
  •   } 
  • } 
  • 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. 
  
  
  
    2. function getGreeting() { 
      3. 
  
  
  
    3.   return 'Welcome to JavaScript'; 
      4. 
  
  
  
    4. } 
      5. 
  
  
  
    5. 
  
  
  
    6. // JavaScript ES6 arrow function with body 
      7. 
  
  
  
    7. const getGreeting = () => { 
      8. 
  
  
  
    8.   return 'Welcome to JavaScript'; 
      9. 
  
  
  
    9. } 
      10. 
  
  
  
    10. 
  
  
  
    11. // JavaScript ES6 arrow function without body and implicit return 
      12. 
  
  
  
    12. const getGreeting = () => 
      13. 
  
  
  
    13.   'Welcome to JavaScript';
      14.

    在 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. 
  
  
  
    2.   return view; 
      3. 
  
  
  
    3. }
      4.

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

     
 
 
      
  
  
  
    1. function Greeting(props) { 
      2. 
  
  
  
    2.   return 
      {props.greeting}
      ; 
      3. 
  
  
  
    3. }
      4.

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

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

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

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

    React 类组件语法

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

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

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

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

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

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

    React 中的模板字面量

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

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

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

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

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

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

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

    React 中 Map、Reduce 和 Filter

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

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

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

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

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

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

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

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

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

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

    通常，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. 
  
  
  
    2. class App extends Component {
      3. 
  
  
  
    3.    render() { 
      4. 
  
  
  
    4.     const users = [ 
      5. 
  
  
  
    5.       { name: 'Robin' }, 
      6. 
  
  
  
    6.       { name: 'Markus' }, 
      7. 
  
  
  
    7.     ]; 
      8. 
  
  
  
    8.     return ( 
      9. 
  
  
  
    9.       
         
  
  
  
      •         {users.map(user => 
      • {user.name}
        • )} 
  
  
  
      •       
       
      10. 
  
  
  
    10.     );
      11. 
  
  
  
    11.    } 
      12. 
  
  
  
    12. } 
      13. 
  
  
  
    13. export default App;
      14.

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

    （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. 
  
  
  
    2. class App extends Component {
      3. 
  
  
  
    3.    render() { 
      4. 
  
  
  
    4.     const users = [ 
      5. 
  
  
  
    5.       { name: 'Robin' },
      6. 
  
  
  
    6.       { name: 'Markus' }, 
      7. 
  
  
  
    7.     ]; 
      8. 
  
  
  
    8.     const showUsers = false; 
      9. 
  
  
  
    9.     if (!showUsers) { 
      10. 
  
  
  
    10.       return null; 
      11. 
  
  
  
    11.     }
      12. 
  
  
  
    12. 
  
  
  
    13.     return ( 
      14. 
  
  
  
    14.       
         
  
  
  
      •         {users.map(user => 
      • {user.name}
        • )} 
  
  
  
      •       
       
      15. 
  
  
  
    15.     );
      16. 
  
  
  
    16.    } 
      17. 
  
  
  
    17. }
      18. 
  
  
  
    18.  
      19. 
  
  
  
    19. 
  
  
  
    20. export default App;
      21.

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

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

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

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

    详细的原理我就不说了，但如果你感兴趣，可以在这篇文章（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. 
  
  
  
    2. import logo from './logo.svg'; 
      3. 
  
  
  
    3. import './App.css'; 
      4. 
  
  
  
    4. class App extends Component { 
      5. 
  
  
  
    5.   render() { 
      6. 
  
  
  
    6.     return ( 
      7. 
  
  
  
    7.        
      8. 
  
  
  
    8.          
      9. 
  
  
  
    9.            
      10. 
  
  
  
    10.           Welcome to React 
      11. 
  
  
  
    11.          
      12. 
  
  
  
    12.          
      13. 
  
  
  
    13.           To get started, edit src/App.js and save to reload. 
      14. 
  
  
  
    14.         
       
      15. 
  
  
  
    15.        
      16. 
  
  
  
    16.     ); 
      17. 
  
  
  
    17.   } 
      18. 
  
  
  
    18. } 
      19. 
  
  
  
    19. 
  
  
  
    20. export default App;
      21.

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

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

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

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

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

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

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

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

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

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

     
 
 
      
  
  
  
    1. const robin = { 
      2. 
  
  
  
    2.   firstname: 'Robin', 
      3. 
  
  
  
    3.   lastname: 'Wieruch', 
      4. 
  
  
  
    4. }; 
      5. 
  
  
  
    5. export default robin;
      6.

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

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

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

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

    在另一个文件中导入：

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

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

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

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

    React 中的库

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

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

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

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

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

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

    React 中的高阶函数

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

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

     
 
 
      
  
  
  
    1. import React, { Component } from 'react'; 
      2. 
  
  
  
    2. class App extends Component { 
      3. 
  
  
  
    3.   state = { 
      4. 
  
  
  
    4.     query: '', 
      5. 
  
  
  
    5.   }; 
      6. 
  
  
  
    6.   onChange = event => { 
      7. 
  
  
  
    7.     this.setState({ query: event.target.value }); 
      8. 
  
  
  
    8.   } 
      9. 
  
  
  
    9.   render() { 
      10. 
  
  
  
    10.     const users = [ 
      11. 
  
  
  
    11.       { name: 'Robin' }, 
      12. 
  
  
  
    12.       { name: 'Markus' }, 
      13. 
  
  
  
    13.     ]; 
      14. 
  
  
  
    14.     return (  <            
      
                文章题目：在开始React之前，你需要学好这些JavaScript
                
      
                转载注明：http://www.hantingmc.com/qtweb/news45/217195.html
            
      
            
      
                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                
      
            
      
                广告
                
            
      
            
      
                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联
            
      
        
        
      
            
      猜你还喜欢下面的内容
      
            
        
      
    
    
      
        
      
            
      解决方案知识
      
            
        
      
        
      
            
      分类信息网站
      
            
        
      
    
      


      
    
      
        全网整合营销　　 　温江做网站　　 　德阳电信机房　　 　定制网站制作　　 　网站推广　　 　广告品牌策划设计　　 　网站搜索引擎优化　　 　成都钢筋机械设备　　 　橡塑保温材料　　 　服务器租用　　 　成都网站维护　　 　四川网站建设　　 　成都网站设计　　 　免备案空间　　 　成都ssl证书认证　　 　成都网站制作　　 　成都茶叶销售　　 　四川国泰民安消防　　 　什邡网站建设　　 　成都封阳台