Vue基操會了，還有必要學React麼？

這是我參與更文挑戰的第12天，活動詳情查看： 更文挑戰

前言

公衆號給npy的前端祕籍

加vx👉16639199716,拉你進羣嗷~❤️

本專欄會梳理一個Vue coder 對React 嚐鮮的經歷與過程的知識👍👍👍

若是你也是和我同樣，有着相同的技術追求，有着進大廠的夢想，那麼選擇給npy的前端祕籍將是你不錯的選擇、那麼我也願意同你一塊兒共同進步、共同窗習。廢話很少說，讓咱們立刻開始吧👇

React前言

很高興你能來到這裏學習React.js技術，這是本專欄的第一節，主要介紹一下小夥伴們常問的一些問題，雖然廢話不少，可是仍是建議你能夠花幾分鐘看一下。

React簡介

首先不可否認React.js是全球最火的前端框架(Facebook推出的前端框架)，國內的一二線互聯網公司大部分都在使用React進行開發，好比阿里、美團、百度、去哪兒、網易 、知乎這樣的一線互聯網公司都把React做爲前端主要技術棧。 React的社區也是很是強大的,隨着React的普及也衍生出了更多有用的框架，好比ReactNative和React VR。React從13年開始推廣，如今已經推出18.x.x版本，性能和易用度上，都有很大的提高。

React優勢總結

• 生態強大：如今沒有哪一個框架比React的生態體系好的，幾乎全部開發需求都有成熟的解決方案。

• 上手簡單: 你甚至能夠在幾個小時內就能夠上手React技術，可是他的知識很廣，你可能須要更多的時間來徹底駕馭它。

• 社區強大：你能夠很容易的找到志同道合的人一塊兒學習，由於使用它的人真的是太多了。

React和Vue的對比

這是前端最火的兩個框架，雖說React是世界使用人數最多的框架，可是就在國內而言Vue的使用者頗有可能超過React。兩個框架都是很是優秀的，因此他們在技術和先進性上不相上下。

那我的而言在接到一個項目時，我是如何選擇的那？React.js相對於Vue.js它的靈活性和協做性更好一點，因此我在處理複雜項目或公司核心項目時，React都是個人第一選擇。而Vue.js有着豐富的API，實現起來更簡單快速，因此當團隊不大，溝通緊密時，我會選擇Vue，由於它更快速更易用。（須要說明的是，其實Vue也徹底勝任於大型項目，這要根據本身對框架的掌握程度來決定，以上只是站在個人知識程度基礎上的我的總結）

咱們將學到什麼？

咱們將學習全部 React 的基礎概念，其中又分爲三個部分：

• 編寫組件相關：包括 JSX 語法、Component、Props
• 組件的交互：包括 State 和生命週期
• 組件的渲染：包括列表和 Key、條件渲染
• 和 DOM & HTML 相關：包括事件處理、表單。

前提條件

咱們假設你熟系 HTML 和 JavaScript，但即便你是從其餘編程語言轉過來的，你也能看懂這篇教程。咱們還假設你對一些編程語言的概念比較熟悉，好比函數、對象、數組，若是對類瞭解就更好了。

環境準備

首先準備 Node 開發環境，訪問 Node 官方網站下載並安裝。打開終端輸入以下命令檢測 Node 是否安裝成功：

node -v # v10.16.0

npm -v # 6.9.0

注意

Windows 用戶須要打開 cmd 工具，Mac 和 Linux 是終端。

若是上面的命令有輸出且無報錯，那麼表明 Node 環境安裝成功。接下來咱們將使用 React 腳手架 -- Create React App（簡稱 CRA）來初始化項目，同時這也是官方推薦初始化 React 項目的最佳方式。

在終端中輸入以下命令：

npx create-react-app my-todolist

等待命令運行完成，接着輸入以下命令開啓項目：

cd my-todolist && npm start

CRA 會自動開啓項目並打開瀏覽器

🎉🎉🎉 恭喜你！成功建立了第一個 React 應用！

如今 CRA 初始化的項目裏有不少無關的內容，爲了開始接下來的學習，咱們還須要作一點清理工做。首先在終端中按 ctrl + c 關閉剛剛運行的開發環境，而後在終端中依次輸入以下的命令：

進入 src 目錄

cd src

若是你在使用 Mac 或者 Linux：

rm -f *

或者，你在使用 Windows：

del *

而後，建立咱們將學習用的 JS 文件

若是你在使用 Mac 或者 Linux：

touch index.js

或者，你在使用 Windows

type nul > index.js

最後，切回到項目目錄文件夾下

cd .. 此時若是在終端項目目錄下運行 npm start 會報錯，由於咱們的 index.js 尚未內容，咱們在終端中使用 ctrl +c 關閉開發服務器，而後使用編輯器打開項目，在剛剛建立的 index.js 文件中加入以下代碼：

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  render() {
    return <div>Hello, World</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
複製代碼

咱們看到 index.js 裏面的代碼分爲三個部分。

首先是一系列導包，咱們導入了 react 包，並命名爲 React，導入了 react-dom 包並命名爲 ReactDOM。對於包含 React 組件（咱們將在以後講解）的文件都必須在文件開頭導入 React。

而後咱們定義了一個 React 組件，命名爲 App，繼承自 React.Component，組件的內容咱們將會在後面進行講解。

接着咱們使用 ReactDOM 的 render 方法來渲染剛剛定義的 App 組件，render方法接收兩個參數，第一個參數爲咱們的 React 根級組件，第二個參數接收一個 DOM 節點，表明咱們將把和 React 應用掛載到這個 DOM 節點下，進而渲染到瀏覽器中。

注意

上面代碼的三個部分中，第一部分和第三部分在整篇教程中是不會修改的，同時在編寫任意 React 應用，這兩個部分都是必須的。後面全部涉及到的代碼修改都是關於第二部分代碼的修改，或者是在第一部分到第三部分之間插入或刪除代碼。

JSX 語法

首先咱們來看一下 React 引覺得傲的特性之一 -- JSX。它容許咱們在 JS 代碼中使用 XML 語法來編寫用戶界面，使得咱們能夠充分的利用 JS 的強大特性來操做用戶界面。

一個 React 組件的 render 方法中 return 的內容就爲這個組件所將渲染的內容。好比咱們如今的代碼：

render() {
    return <div>Hello, World</div>;
}
複製代碼

這裏的 <div>Hello, World</div> 是一段 JSX 代碼，它最終會被 Babel轉譯成下面這段 JS 代碼:

React.createElement(
  'div',
  null,
  'Hello, World'
)
複製代碼

React.createElement() 接收三個參數：

• 第一個參數表明 JSX 元素標籤。
• 第二個參數表明這個 JSX 元素接收的屬性，它是一個對象，這裏由於咱們的 div 沒有接收任何屬性，因此它是 null。
• 第三個參數表明 JSX 元素包裹的內容。

React.createElement() 會對參數作一些檢查確保你寫的代碼不會產生 BUG，它最終會建立一個相似下面的對象：

{
  type: 'div',
  props: {
    children: 'Hello, World'
  }
};
複製代碼

這些對象被稱之爲 「React Element」。你能夠認爲它們描述了你想要在屏幕上看到的內容。React 將會接收這些對象，使用它們來構建 DOM，而且對它們進行更新。

App 組件最終返回這段 JSX 代碼，因此咱們使用 ReactDOM 的 render 方法渲染 App 組件，最終顯示在屏幕上的就是 Hello, World" 內容。

JSX 做爲變量使用

由於 JSX 最終會被編譯成一個 JS 對象，因此咱們能夠把它當作一個 JS 對象使用，它享有和一個 JS 對象同等的地位，好比能夠將其賦值給一個變量，咱們修改上面代碼中的 render 方法以下：

render() {
  const element = <div>Hello, World</div>;
  return element;
}
複製代碼

保存代碼，咱們發現瀏覽器中渲染的內容和咱們以前相似。

在 JSX 中使用變量

咱們可使用大括號 {} 在 JSX 中動態的插入變量值，好比咱們修改 render 方法以下：

render() {
  const content = "World";
  const element = <div>Hello, {content}</div>;
  return element;
}
複製代碼

JSX 中使用 JSX

咱們能夠在 JSX 中再包含 JSX，這樣咱們編寫任意層次的 HTML 結構：

render() {
    const element = <li>Hello, World</li>
    return (
      <div> <ul> {element} </ul> </div>
    )
  }
複製代碼

JSX 中添加節點屬性 咱們能夠像在 HTML 中同樣，給元素標籤加上屬性，只不過咱們須要遵照駝峯式命名法則，好比在 HTML 上的屬性 data-index 在 JSX 節點上要寫成 dataIndex。

const element = <div dataIndex="0">Hello, World</div>;
複製代碼

注意

在 JSX 中全部的屬性都要更換成駝峯式命名，好比 onclick 要改爲 onClick，惟一比較特殊的就是 class，由於在 JS 中 class 是保留字，咱們要把 class 改爲 className 。

const element = <div className="app">Hello, World</div>;
複製代碼

實戰

在編輯器中打開 src/index.js ，對 App 組件作以下改變：

class App extends React.Component {
  render() {
    const todoList = ["給npy的前端祕籍", "fyj", "每天的小迷弟", "仰望毛毛大佬"];
    return (
      <ul> <li>Hello, {todoList[0]}</li> <li>Hello, {todoList[1]}</li> <li>Hello, {todoList[2]}</li> <li>Hello, {todoList[3]}</li> </ul>
    );
  }
}
複製代碼

能夠看到，咱們使用 const 定義了一個 todoList 數組常量，而且在 JSX 中使用 {} 進行動態插值，插入了數組的四個元素。

提示

無需關閉剛纔使用 npm start 開啓的開發服務器，修改代碼後，瀏覽器中的內容將會自動刷新！

你可能注意到了咱們手動獲取了數組的四個值，而後逐一的用 {} 語法插入到 JSX 中並最終渲染，這樣作還比較原始，咱們將在後面列表和 Key小節中簡化這種寫法。

在這一小節中，咱們瞭解了 JSX 的概念，而且實踐了相關的知識。咱們還提出了組件的概念，可是並無深刻講解它，在下一小節中咱們將詳細地講解組件的知識。

總結

專欄第一篇與你們一塊兒學習了React基本知識、後續還會有更精彩的哇、一塊兒加油哇~

❤️ 感謝你們

若是你以爲這篇內容對你挺有有幫助的話： 點贊支持下吧，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓 -_-）關注公衆號給npy的前端祕籍，咱們一塊兒學習一塊兒進步。 以爲不錯的話，也能夠閱讀其餘文章（感謝朋友的鼓勵與支持🌹🌹🌹）

開啓LeetCode之旅

LeetCode之雙指針

Leet2七、移除元素

前端工程師必學的經典排序算法

LeetCode20、括號匹配

LeetCode七、整數反轉