• library（庫）：小而巧的庫，只提供了特定的API；優(yōu)點(diǎn)就是 船小好掉頭，可以很方便的從一個(gè)庫切換到另外的庫；但是代碼幾乎不會改變；
• Framework（框架）：大而全的是框架；框架提供了一整套的解決方案；所以，如果在項(xiàng)目中間，想切換到另外的框架，是比較困難的；

  2. 前端三大主流框架

  三大框架一大抄

3. React與vue的對比

組件化方面

• template 結(jié)構(gòu)
• script 行為
• style 樣式

開發(fā)團(tuán)隊(duì)方面

社區(qū)方面

移動(dòng)APP開發(fā)體驗(yàn)方面

4. 為什么要學(xué)習(xí)React

5. React中幾個(gè)核心的概念

虛擬DOM（Virtual Document Object Model）

• DOM的本質(zhì)是什么：瀏覽器中的概念，用JS對象來表示 頁面上的元素，并提供了操作 DOM 對象的API；
• 什么是React中的虛擬DOM：是框架中的概念，是程序員 用JS對象來模擬 頁面上的 DOM 和 DOM嵌套；
• 為什么要實(shí)現(xiàn)虛擬DOM（虛擬DOM的目的）：為了實(shí)現(xiàn)頁面中， DOM 元素的高效更新
• DOM和虛擬DOM的區(qū)別：
  • DOM：瀏覽器中，提供的概念；用JS對象，表示頁面上的元素，并提供了操作元素的API；
  • 虛擬DOM：是框架中的概念；而是開發(fā)框架的程序員，手動(dòng)用JS對象來模擬DOM元素和嵌套關(guān)系；
    • 本質(zhì)： 用JS對象，來模擬DOM元素和嵌套關(guān)系；

• tree diff:新舊兩棵DOM樹，逐層對比的過程，就是 Tree Diff； 當(dāng)整顆DOM逐層對比完畢，則所有需要被按需更新的元素，必然能夠找到；
• component diff：在進(jìn)行Tree Diff的時(shí)候，每一層中，組件級別的對比，叫做 Component Diff；
  • 如果對比前后，組件的類型相同，則暫時(shí)認(rèn)為此組件不需要被更新；
  • 如果對比前后，組件類型不同，則需要移除舊組件，創(chuàng)建新組件，并追加到頁面上；

• 如何安裝 cnpm: 全局運(yùn)行 npm i cnpm -g

• 默認(rèn)約定了：
• 打包的入口是src -> index.js
• 打包的輸出文件是dist -> main.js
• 4.x 中 新增了 mode 選項(xiàng)(為必選項(xiàng))，可選的值為：development 和 production;

  7. 在項(xiàng)目中使用 react

• react： 專門用于創(chuàng)建組件和虛擬DOM的，同時(shí)組件的生命周期都在這個(gè)包中
• react-dom： 專門進(jìn)行DOM操作的，最主要的應(yīng)用場景，就是ReactDOM.render()

<!-- 容器，將來，使用 React 創(chuàng)建的虛擬DOM元素，都會被渲染到這個(gè)指定的容器中 --><div id="app"></div>

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

// 這是 創(chuàng)建虛擬DOM元素的 API    <h1 title="啊，五環(huán)" id="myh1">你比四環(huán)多一環(huán)</h1>//  第一個(gè)參數(shù)： 字符串類型的參數(shù)，表示要?jiǎng)?chuàng)建的標(biāo)簽的名稱//  第二個(gè)參數(shù)：對象類型的參數(shù)， 表示 創(chuàng)建的元素的屬性節(jié)點(diǎn)//  第三個(gè)參數(shù)： 子節(jié)點(diǎn)const myh1 = React.createElement('h1', { title: '啊，五環(huán)', id: 'myh1' }, '你比四環(huán)多一環(huán)')

// 3. 渲染虛擬DOM元素// 參數(shù)1： 表示要渲染的虛擬DOM對象// 參數(shù)2： 指定容器,注意：這里不能直接放 容器元素的Id字符串，需要放一個(gè)容器的DOM對象ReactDOM.render(myh1, document.getElementById('app'))

8. JSX語法

什么是JSX語法：就是符合 xml 規(guī)范的 JS 語法；（語法格式相對來說，要比HTML嚴(yán)謹(jǐn)很多）

• 安裝 babel 插件
  • 運(yùn)行cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
  • 運(yùn)行cnpm i babel-preset-env babel-preset-stage-0 -D
• 安裝能夠識別轉(zhuǎn)換jsx語法的包 babel-preset-react
  • 運(yùn)行cnpm i babel-preset-react -D
• 添加 .babelrc 配置文件

  {  "presets": ["env", "stage-0", "react"],  "plugins": ["transform-runtime"]}

• 添加babel-loader配置項(xiàng)：

  module: { //要打包的第三方模塊    rules: [      { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }    ]}

  ?

• 渲染數(shù)字
• 渲染字符串
• 渲染布爾值
• 為屬性綁定值
• 渲染jsx元素
• 渲染jsx元素?cái)?shù)組
• 將普通字符串?dāng)?shù)組，轉(zhuǎn)為jsx數(shù)組并渲染到頁面上【兩種方案】

當(dāng) 編譯引擎，在編譯JSX代碼的時(shí)候，如果遇到了<那么就把它當(dāng)作 HTML代碼去編譯，如果遇到了 {} 就把 花括號內(nèi)部的代碼當(dāng)作 普通JS代碼去編譯；

9. React中創(chuàng)建組件

第1種 - 創(chuàng)建組件的方式

使用構(gòu)造函數(shù)來創(chuàng)建組件，如果要接收外界傳遞的數(shù)據(jù)，需要在 構(gòu)造函數(shù)的參數(shù)列表中使用props來接收；

必須要向外return一個(gè)合法的JSX創(chuàng)建的虛擬DOM；

function Hello () {     // return null     return <div>Hello 組件</div>}

// 使用組件并 為組件傳遞 props 數(shù)據(jù)<Hello name={dog.name} age={dog.age} gender={dog.gender}></Hello>// 在構(gòu)造函數(shù)中，使用 props 形參，接收外界 傳遞過來的數(shù)據(jù)function Hello(props) {  // props.name = 'zs'  console.log(props)  // 結(jié)論：不論是 Vue 還是 React，組件中的 props 永遠(yuǎn)都是只讀的；不能被重新賦值；  return <div>這是 Hello 組件 --- {props.name} --- {props.age} --- {props.gender}</div>}

// 打開 webpack.config.js ，并在導(dǎo)出的配置對象中，新增 如下節(jié)點(diǎn)：resolve: {    extensions: ['.js', '.jsx', '.json'], // 表示，這幾個(gè)文件的后綴名，可以省略不寫    alias: {        '@': path.join(__dirname, './src')    }  }

第2種 - 創(chuàng)建組件的方式

使用 class 關(guān)鍵字來創(chuàng)建組件

ES6 中 class 關(guān)鍵字，是實(shí)現(xiàn)面向?qū)ο缶幊痰男滦问剑?/p>

了解ES6中 class 關(guān)鍵字的使用

基于class關(guān)鍵字創(chuàng)建組件

class 組件名稱 extends React.Component {    render(){        return <div>這是 class 創(chuàng)建的組件</div>    }}

10. 兩種創(chuàng)建組件方式的對比

有狀態(tài)組件和無狀態(tài)組件之間的本質(zhì)區(qū)別就是：有無state屬性！

11. 一個(gè)小案例，鞏固有狀態(tài)組件和無狀態(tài)組件的使用

通過for循環(huán)生成多個(gè)組件

CommentList: [ { id: 1, user: '張三', content: '哈哈，沙發(fā)' }, { id: 2, user: '李四', content: '哈哈，板凳' }, { id: 3, user: '王五', content: '哈哈，涼席' }, { id: 4, user: '趙六', content: '哈哈，磚頭' }, { id: 5, user: '田七', content: '哈哈，樓下山炮' }]

設(shè)置樣式

• [path] 表示樣式表所在路徑
• [name] 表示 樣式表文件名
• [local] 表示樣式的定義名稱
• [hash:length] 表示32位的hash值

安裝 React Developer Tools 調(diào)試工具

總結(jié)

相關(guān)文章