在你學習React之前必備的JavaScript基礎有哪些

這篇文章主要介紹“在你學習React之前必備的JavaScript基礎有哪些”，在日常操作中，相信很多人在在你學習React之前必備的JavaScript基礎有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”在你學習React之前必備的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 (        <h2>Hello React!</h2>      )    }  }

這使得我們能夠使用 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 (        <h2>{greeting}</h2>      )    }  }

在整個應用的生命周期中 greeting 并不會發生改變，所以我們在這里使用 const

箭頭函數

箭頭函數是 ES6 的一種新特性，在現代代碼庫中幾乎被廣泛使用，因為它使代碼簡潔易讀。 它允許我們使用更短的語法編寫函數。

// regular function  const testFunction = function() {    // content..  }  // arrow function  const testFunction = () => {    // content..  }

如果您是一位經驗豐富的 JS 開發人員，那么從常規函數語法轉換為箭頭語法可能會讓您感到不舒服。 當我學習箭頭函數時，我用這兩個簡單的步驟來重寫我的函數：

1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

2.  移除 function 關鍵字

3.  在 () 后面加上 =>

括號仍然用于傳遞參數，如果只有一個參數，則可以省略括號。

const testFunction = (firstName, lastName) => {    return firstName+' '+lastName;  }  const singleParam = firstName => {    return firstName;  }

隱藏的 return

如果箭頭函數只有一行，則可以返回值而無需使用 return 關鍵字以及大括號。

const testFunction = () => 'hello there.';  testFunction();

在 React 中的使用

const HelloWorld = (props) => {    return <h2>{props.hello}</h2>;  }

等同于 ES6 的類組件

class HelloWorld extends Component {    render() {      return (        <h2>{props.hello}</h2>;      );    }  }

在 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 <h2>{props.hello}</h2>;  }

我們可以立即簡單地解構參數：

const HelloWorld = ({ hello }) => {    return <h2>{hello}</h2>;  }

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之前必備的JavaScript基礎有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！