React.js 快速上手開發知識梳理

前言

文章涉及的內容可能不全面，但量不少，須要慢慢看。我花了很長的時間整理，用心分享心得，但願對你們有所幫助。可是不免會有打字的錯誤或理解的錯誤點，但願發現的能夠郵箱告訴我1163675970@qq.com，我會及時的進行修改，只但願對你有所幫助，謝謝。

React 是什麼？

React 是一個由 facebook 開源的 前端框架，核心專一於視圖，目的是實現組件化開發；

• 組件化的概念

咱們能夠很直觀的將有一個複雜的頁面分割成若干個獨立的組件，每一個組件包含本身的 html 結構、樣式和js邏輯，而後再將這些組件組合，便可完成一個複雜的頁面。這樣既減小了邏輯的複雜度，又實現了代碼的重用；

• 組件化的優點：

1. 可組合：一個組件能夠和其餘組件一塊兒使用或者能夠直接嵌套在另外一個組件內部
2. 可重用：每一個組件都具備獨立的功能，他能夠被使用在多個場景中
3. 可維護：每一個小的組件僅僅包含自身的邏輯，更容易被理解和維護

配置 React 的開發環境

1.安裝 react 的腳手架 create-react-app ：

npm install create-react-app -g
複製代碼

2.使用 react 腳手架初始化一個項目：create-react-app 項目名，例如 :

create-react-app first-app
複製代碼

3.等待依賴安裝完成，而後執行:

cd first-app
npm start
複製代碼

React 的組成部分

react由兩部分組成：

1. react.js 是 React 的核心庫
2. react-dom.js 是提供與 DOM 相關的功能，會在 window 下增長 ReactDOM 屬性；其中經常使用的是 render 方法，render 能夠將 react 元素或者組件插入到頁面中；

vue是MVVM框架（model view viewModel）

須要咱們處理的是

• model ：data（defineProperty GETTER/SETTER）、computed、vuex...
• view ：template、el、render...
• viewModel：vue自己實現，用來監聽數據和視圖的改變，從而實現雙向數據綁定

REACT是MVC框架（model view controll）

看圖

REACT腳手架：create-react-app

https://create-react-app.dev
複製代碼

全局環境安裝腳手架

$ npm install -g create-react-app
複製代碼

基於腳手架快速構建工程化的項目

$ create-react-app  xxx  （若是電腦上安裝了yarn，默認基於yarn安裝）
複製代碼

---

不想安裝在全局，能夠基於npx一步到位 $ npx create-react-app xxx

腳手架建立的項目目錄

|- node_modules  全部安裝的模塊
|- public 
	|- index.html  SPA單頁面應用中，各組件最後合併渲染完成的結果都會放入到頁面的#root盒子中呈現
	|- xxx.html  MPA/SPA這裏存放的是最後編譯頁面的模板
	|- 咱們還可能會在此放一些公共資源，把這些資源直接基於SRC/LINK的方式調入到頁面模板中，而不是基於webpack最後合併在一塊兒（不建議：可是項目中，可能存在一些木塊不支持CommonJS/ES6Module規範，此時咱們只能在這裏直接引入使用了）
|- src 整個項目的大部分源碼都寫在這個目錄下
	|- index.js  項目的入口,webpack從這個文件開始導入打包（MPA中須要建立多入口文件）
	|- api  數據處理
	|- store REDUX公共狀態管理的
	|- assets 存儲公共資源的（圖片和樣式）
	|- utils 公共的JS模塊
	|- routes 路由管理的
	|- components 公共的組件
	|- ...
|- package.json
複製代碼

默認的配置清單

• 生產依賴項
  • react REACT框架的核心，提供了狀態、屬性、組件、生命週期等
  • react-dom 把JSX語法渲染成爲真實的DOM，最後顯示在瀏覽器中
  • react-scripts 包含了當前工程化項目中webpack配置的東西（嫌棄把webpack放到項目目錄中看上去太醜，腳手架把全部webpack的配置項和依賴都隱藏到node_modules中了，react-scripts這個REACT腳本執行命令，會通知webpack打包編譯）
• scripts 當前項目可執行的腳本命令（$ yarn xxx）
  • $ yarn start => 開發環境下啓動項目（默認會基於WEBPACK-DEV-SERVER建立一個服務，用來隨時編譯和渲染開發的內容）
  • $ yarn build => 生產環境下，把編寫內容打包編譯，放到build文件目錄下（服務器部署）
  • $ yarn eject => 把全部隱藏在node_modules中的webpack配置項都暴露出來（方便本身根據項目需求，二次更改webpack配置）

yarn eject

• babel-preset-react-app 解析JSX語法的

若是執行yarn start/build 提示少模塊，咱們則少了誰就安裝誰

• @babel/plugin-transform-react-jsx
• @babel/plugin-transform-react-jsx-source
• @babel/plugin-transform-react-jsx-selfcls

|- scripts
	|- start.js  => $ yarn start
	|- build.js  => $ yarn build
|- config
	|- 這裏存儲的就是webpack的配置項
複製代碼

PACKAGE.JSON

"scripts": {
	"startMac": "PORT=8081 node scripts/start.js",
	"start": "set PORT=8081&&set HOST=127.0.0.1&&set HTTPS=true&&node scripts/start.js",
	"build": "node scripts/build.js"
},
複製代碼

修改less的處理配置

• $ yarn add less less-loader

config/webpack.config.js

const cssRegex = /\.(css|less)$/;


{
	test: cssRegex,
	exclude: cssModuleRegex,
	use: getStyleLoaders({
		importLoaders: 1,
		sourceMap: isEnvProduction && shouldUseSourceMap,
	}, "less-loader"),
	// Don't consider CSS imports dead code even if the // containing package claims to have no side effects. // Remove this when webpack adds a warning or an error for this. // See https://github.com/webpack/webpack/issues/6571 sideEffects: true, }, 複製代碼

jsx 語法

• jsx 語法是一種 js 和 HTML 混寫的語法，將組件的結構，數據甚至樣式都聚合在一塊兒定義組件，最終通過編譯造成普通的 javascript；

• 在 jsx 中，長得像 HTML 元素的就是 react 元素，React 使用 jsx 語法開發，學習 React 須要掌握 jsx 語法；

• jsx 能夠寫在 js 文件中，也能夠新建 .jsx 文件；可是在 js 文件中須要導入 React

import React from 'react';

// 導入 React 以後才能開始寫 jsx 語法
複製代碼

jsx 示例

import React from 'react'
import ReactDOM from 'react-dom'

let data = {
  name: '帥哥',
  age: 18
};

let h = <h1 id="xyz">姓名：{ data.name }, 年齡：{ data.age }</h1>; // 這個 h 就是一個 react 元素，也能夠成jsx元素，這個元素是虛擬DOM（js對象）

// 把 react 元素渲染到頁面中
ReactDOM.render(h, document.querySelector('#root'), () => {
  console.log('100');
  console.log(document.getElementById('xyz'))
});
複製代碼

使用 jsx 的注意事項

1. JSX 元素須要放到 ReactDOM.render() 函數中，且最外層只能有一個根節點；

2. 須要注意 jsx 是js，寫 jsx 需注意遵照 js 的語法；

3. jsx 元素能夠經過 { } 來使用表達式，注意只能是表達式，不容許寫語句

4. jsx 元素一樣可使用行內屬性，可是 原來 html 行內的 class 屬性，在 jsx 中有特殊意義，須要改爲 className ；原有的 label 的 for 屬性，須要改爲 htmlFor ； style屬性要寫成對象的形式

5. jsx 元素（react元素）並非真正的 DOM，而是虛擬 DOM ，最終通過 babel 編譯成普通js的對象；

示例：

let d1 = <div className="x1">這是一個div { false ? 1 : 0 }</div>
let d2 = (<div className={ false ? 'x1' : 'y1' }> 這是一個div <p>這裏面減值能夠寫一個html</p> </div>); // 若是換行用小括號包裹起來

let d3 = <div style={{color: 'red', background: '#000'}}>11111<label htmlFor="name"><input type="text" defaultValue={data.name} id="name" /></label></div>; ReactDOM.render(d3, document.getElementById('root')); 複製代碼

ReactDOM.render() 渲染

1. 在執行 render 時，先將jsx虛擬的 DOM 元素轉換成真實的 DOM 元素
2. 而且把當前真實的 DOM 插入到真實的DOM元素中
3. 把DOM 渲染到真實的 DOM 以後，纔會執行後面的回調函數，能夠在這個函數中操做 DOM；

在 React 中使用樣式

在 react 中使用樣式，直接在 js 中經過 import 導入 css 樣式；最終打包的時候，webpack 會幫咱們把樣式處理好；

示例

import React from 'react'
import ReactDOM from 'react-dom'

import './css/3-css.css' // 在 react 中使用樣式，直接在 js 中經過 import 導入 css 樣式
let p1 = <p className="p1">這是一個p標籤</p>; // 注意不能使用 class 指定元素類名，而應該使用 className 屬性

ReactDOM.render(p1, document.querySelector('#root'));
複製代碼

列表渲染和條件渲染

列表渲染

React 和 Vue 相似都是數據驅動的，均可以根據給定的數據生成一組 DOM 元素，或者根據數據的特定狀況生成或者不生成 DOM 元素；在 Vue 中使用 v-for 指令，可是 React 沒有指令系統，須要使用 數組的 map 方法，在 map方法的回調函數中返回要生成的 jsx 元素；

示例

import React from 'react'
import ReactDOM from 'react-dom'

let ary = [
  {
    name: '瘦大大',
    age: 18,
    title: '宇宙集團軍總司令'
  },
  {
    name: '胖小小',
    age: 17,
    title: '銀河小魔仙'
  }
];

// 在 Vue 中使用 v-for，可是 React 中沒有指令
// 在 React 中使用列表渲染，須要使用 數組的 map 方法，在 map 方法的回調函數中返回要生成多個的元素；

// 使用傳統的匿名函數：
let lis = ary.map(function (item, index) {
  return <li key={index}>姓名：{item.name}；年齡：{item.age}；職務：{item.title}</li>
}); // map 方法將原數組映射成一個新數組，

console.log(lis); // 虛擬 DOM 數組
let ul = (<ul> {lis} {/*使用列表渲染出來的數據，在 html 裏面使用須要使用 { lis }*/} </ul>);

// 使用 箭頭函數
let ul2 = (<ol> { ary.map((item, index) => <li key={index}>name: {item.name}; age: {item.age}; title: {item.title}</li>) } </ol>);

ReactDOM.render(ul2, document.querySelector('#root'));
複製代碼

條件渲染

React 一樣沒有 v-if，可是須要條件渲染，就須要使用 if-else 等判斷語句

示例

let flag = Math.round(Math.random() * 10)
let el;
if (flag > 5) {
    el = <h1>大於5</h1>
} else {
    el = <h1> 小於等於 5</h1>
}
複製代碼

React.createElement

React.createElement() 方法是用來建立虛擬 DOM 的方法，而 jsx 語法中，jsx 元素就是 createElement 方法的語法糖；

React.createElement(type, props, ...children) 參數

• type: 標籤類型
• props: 行內屬性，對象數據類型
• children： 從第三個參數開始都是 type 的子元素

示例

import React from 'react';
import ReactDOM from 'react-dom';
let ele = (<h1 x="1" y="2"> hello <span s="1">1</span> <span>2</span> </h1>);
let eleByCreateElement = React.createElement(
   'h1',
   {x: 1, y: 2},
   'hello',
   React.createElement('span', {s: 1}, 1),
   React.createElement('span', null, 2)
);
// React.createElement(type, props, ...children)
// type: 標籤類型
// props: 行內屬性，對象數據類型
// children： 從第三個參數開始都是 type 的子元素
ReactDOM.render(eleByCreateElement, document.getElementById('root'));` javascript 複製代碼

​