2022-03-27 第一天

一、React基本使用

1.安裝
npm i react react-dom

react 包是核心，提供創(chuàng)建元素，組件等功能；react-dom 包提供DOM相關(guān)功能。

2. 在頁面中引用（了解）

（1）引入react和react-dom的兩個js文件

<!-- 1.引入react依賴 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

（2）創(chuàng)建React元素，并掛載到頁面（和虛擬DOM對象是一個東西）

        <script>
            // 2.創(chuàng)建DOM元素
            // 參數(shù)一：元素名稱
            // 參數(shù)二：元素的屬性配置對象(可以為null)
            // 參數(shù)三以及之后的參數(shù)：元素子節(jié)點
            const title = React.createElement(
                'h1',
                { id: 'box', title: 'h1標(biāo)簽的屬性' },
                'Hello react!',
                React.createElement('span', null, '我是span節(jié)點')
            );

            // 3.掛載DOM元素
            // 參數(shù)一：要掛在的react元素
            // 參數(shù)二：掛載到哪個DOM里面
            ReactDOM.render(title, document.getElementById('root'));
        </script>

注意：如果在HTML頁面中下載react包，首先初始化package.json。npm init -y

二、使用React腳手架初始化項目

1.無需安裝腳手架包，就可以直接使用npx包提供的初始化命令：

npx create-react-app my-react

2.啟動項目，在項目根目錄執(zhí)行命令：

 npm start

3.腳手架中使用React
使用import關(guān)鍵字導(dǎo)入react、react-dom包后，即可使用

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

yarn命令簡介

  • 初始化新項目：yarn init
  • 安裝包： yarn add 包名稱
  • 安裝項目依賴： yarn install 或者 yarn

三、JSX的簡單使用（Hooks通用）

1.創(chuàng)建JSX
// 使用 小括號包裹JSX，從而避免JS中自動插入分號報錯
const name = (
  <div>我是一個JSX</div>
)
ReactDOM.render(name, document.getElementById('root'))
2.嵌入JS表達式

語法：{ JavaScritp表達式 }

（1）一個JSX要用一個 根節(jié)點 元素包裹。
（2）只要是合法的 \color{red}{js表達式} 都可以進行嵌入。（JSX自身也是js表達式）
（3）js中的 對象 是一個例外，一般只會出現(xiàn)在 style 屬性中。
（4）在{}中不能出現(xiàn) \color{red}{語句}，如if語句、for循環(huán)語句等。
（5）什么是表達式？\color{red}{表達式會產(chǎn)生一個值}，可以在左側(cè)用 \color{red}{const\ \ a =} 接收，常見的表達式：
變量：a、a+1
函數(shù)調(diào)用：fn()
方法調(diào)用：arr.map()、new Date().getDay()

// 在JSX中使用js表達式
const age = 22 //初始化變量
const sayHi = () => 'Hello react!' //定義函數(shù)

const jsBox = (
  // 一個JSX要用一個根節(jié)點元素包裹
  <div>
    {/* 變量 */}
    <div>{age}</div>
    {/* 函數(shù)調(diào)用 */}
    <div>{sayHi()}</div>
    {/* 方法調(diào)用 */}
    <div>{new Date().getFullYear()}</div>
    {/* js中的數(shù)據(jù)也是表達式 */}
    <div>{1}</div>
    <div>{'a'}</div>
    <div>{1 + 1}</div>
    <div>{3 > 5 ? '大于' : '小于或等于'}</div>

    {/* 錯誤示例 */}
    {/* 單花括號內(nèi)不能放js對象，一般只用于style樣式中;也不能是if語句、for循環(huán)語句 */}
    {/* <div>{{ a: '我是a' }}</div>
    <div>{if(true){}}</div>
    <div>{ for(let i = 0;i<10;i++){}}</div> */}
  </div>

)
ReactDOM.render(jsBox, document.getElementById('root'))
3.條件渲染

（1）條件渲染：if語句、三元表達式、邏輯與運符

let isShow = true
// if語句
ifShow = () => {
  if (isShow) {
     return (<div>渲染成功</div>)
  }
  return (<div>此處隱藏</div>)
}

// 三元表達式
ifShow = () => isShow ? (<div>渲染成功</div>) : (<div>此處隱藏</div>)

// 邏輯與運算符：當(dāng)isShow為真時才渲染后面的JSX
ifShow = () => isShow && (<div>渲染成功</div>)

const ifBox = (
  <div>{ifShow()}</div>
)
ReactDOM.render(ifBox, document.getElementById('root'))
4.列表渲染

（1）如果需要渲染一組數(shù)據(jù)，我們應(yīng)該使用數(shù)組的 map () 方法。
（2）渲染列表的時候需要添加 key屬性，key屬性的值要保證唯一。
（3）原則：map()遍歷誰，就給誰添加key屬性。
（4）盡量避免使用 索引號 作為key。

// 循環(huán)渲染：map()函數(shù)，遍歷舊數(shù)組，返回一個新數(shù)組，新數(shù)組的元素都是由舊數(shù)組元素一一映射而來。
// 必須有key值，且key值要唯一。避免使用索引值
const arr = [
  { id: 1, name: '馬冬梅' },
  { id: 2, name: '王祖賢' },
  { id: 3, name: '吳彥祖' }
]
const forBox = (
  <ul>
    {arr.map(item =>
      (<li key={item.id}>{item.name}</li>)
    )}
  </ul>
)
ReactDOM.render(forBox, document.getElementById('root'))
5.樣式處理

（1）用 className 代替 class。
（2）style 的單括號內(nèi)可以放 js對象。
（3）可以安裝并引用 classnames庫，調(diào)用常用的AIP方法。

import classNames from 'classnames'

// 樣式處理
const styleBox = (
  <div className="a1">                                                   // className用法
    <span style={{ color: 'red' }}>......</span>                         // 行內(nèi)樣式用法
    <span className={classNames("b1 b2 ",{c1: false, c2:true})}></span>  // classnames庫的用法
  </div>
)
ReactDOM.render(styleBox, document.getElementById('root'))
6.圖片引入

（1）必須把圖片 先引入到頁面，將引入的圖片放到img標(biāo)簽的 src屬性 位置。

import Icon from '@/assets/img/icon.png';
<img src={Icon} alt="" style="width:14px; height:16px; margin-left:5px; vertical-align:-2px" />
7. 插槽使用

......

四、React組件（函數(shù)組件與Hooks通用）

  • React16.8之前，函數(shù)組件是 無狀態(tài)組件，只負(fù)責(zé)數(shù)據(jù)展示；類組件是 有狀態(tài)組件，負(fù)責(zé)更新UI，在 類組件 中用 setState 修改state數(shù)據(jù)；
  • React16.8之后，統(tǒng)一使用 \color{red}{函數(shù)組件} ，用Hooks中的 \color{red}{useState} 維護和修改state數(shù)據(jù)。
1.函數(shù)組件

（1）函數(shù)名 首字母大寫，React據(jù)此來區(qū)分 組件 和普 通react元素。
（2）必須有 返回值，返回的內(nèi)容表示該組件的結(jié)構(gòu)。可以返回null。

// function Hello () {
//   return (
//     <div>Hello React!</div>
//   )
// }
const Hello = () => <div>Hello React!!!</div>
ReactDOM.render(<Hello />, document.getElementById('root'))
2.類組件

（1）類名稱必須要 大寫字母 開頭。
（2）類組件應(yīng)該 繼承React.Component父類，從而可以使用父類中提供的方法或者屬性。
（3）類組件必須提供 render 方法。
（4）render方法中必須要有 return返回值。

// 類組件
// 組件名首字母大寫;必須繼承自React.Component父類;內(nèi)部必須有render()函數(shù);render()函數(shù)必須有返回值
class Hi extends React.Component {
  render () {
    return (
      <div>Hi React!</div>
    )
  }
}
ReactDOM.render(<Hi />, document.getElementById('root'))
3.將組件抽離成單獨的.js文件
// 導(dǎo)入react
import React from 'react'

// 創(chuàng)建組件
class Hello extends React.Component {
  render () {
    return (
      <div>Hello React!我是單獨抽離的組件</div>
    )
  }
}

// 導(dǎo)出組件
export default Hello
4.組件的事件綁定

（1）\color{red}{類組件中有this，函數(shù)組件中沒有this}
（2）函數(shù)組件事件綁定

不傳參：onClick={handleClick}
傳?參：onClick={(e)=>handleClick('自定義參數(shù)',e)}

// 函數(shù)組件綁定事件
// 函數(shù)組件內(nèi)部沒有this
function Appp () {
  function handleClick () {
    console.log('事件綁定函數(shù)觸發(fā)了！');
  }
  return (
      {/* 不傳參 */}
    <button onClick={handleClick}>按鈕1</button>
      {/* 傳參 */}
    <button onClick={(e)=>handleClick('自定義參數(shù)',e)}>按鈕2</button>
  )
}
ReactDOM.render(<Appp />, document.getElementById('root'))

（3）類組件事件綁定

（1）綁定時的兩種寫法：
???不傳參：onClick={handleClick}
???傳?參：onClick={(e)=>handleClick('自定義參數(shù)',e)}
（2）函數(shù)聲明必須用 \color{red}{箭頭函數(shù)} 的形式。

class Index extends React.Component {
  handleClick1 = (event) => {
    console.log('輸入框的value是：',event.target.value);  // false
  }
  handleClick2 = (a) => {
    return (event) => {
      console.log(a); // '自定義內(nèi)容'
      console.log('輸入框的value是：',event.target.value); // false
    }
  }
  handleClick3 = (event,a) => {
    console.log('輸入框的value是：', event.target.value);  // false
    console.log(a); // false
  }
  render () {
    return (
      <div>
        <button value="false" onClick={this.handleClick1}>按鈕1</button>
        <button value="false" onClick={this.handleClick2('自定義參數(shù)')}>按鈕2</button>
        <button value="false" onClick={ (event)=>this.handleClick3(event,'自定義參數(shù)')}>按鈕3</button>
      </div>
    )
  }
}

注意：
① render()函數(shù)中的this指向 組件實例；(constructor構(gòu)造函數(shù)也是)。
② 事件處理函數(shù)中的this是 undefined，無法調(diào)用組件實例的setState()方法。
③ 這是給事件添加處理方法需要用箭頭函數(shù)，如果是獲取接口數(shù)據(jù)的方法，可以直接寫在配置對象中。

5.React事件綁定說明

（1）通過 onClick 形式為組件綁定事件。（注意大小寫）
（2）React用的是自己封裝的事件，而不是原生的DOM事件。（為了更好的兼容性）
（3）React中的事件時通過 事件委托 來處理的，委托給 組件最外層元素。（為了更高效）
（4）通過 event.target 獲取到實際觸發(fā)事件的DOM元素。
（5）onClick={this.handleClick} 是將 handleClick 函數(shù)本身 作為點擊事件的處理函數(shù)。
（6）onClick={this.handleClick()} 是將handleClick函數(shù)的 返回值 作為點擊事件的處理函數(shù)。

五、類組件中綁定事件處理函數(shù)其他方案

方案一：利用箭頭函數(shù)（了解即可）

在箭頭函數(shù)中返回事件處理函數(shù)的調(diào)用，將render()函數(shù)的this傳遞給事件處理函數(shù)

// 方案一：利用箭頭函數(shù)
class ChangeThis1 extends React.PureComponent {
  state = {
    count: 1
  }
  handleClick () {
    this.setState({ count: this.state.count + 2 })
  }
  render () {
    return (
      <div>
        <div>{this.state.count}</div>
        <button
          //在箭頭函數(shù)中返回事件處理函數(shù)的調(diào)用，將render()函數(shù)的this傳遞給事件處理函數(shù)
          onClick={() => this.handleClick()}
        >
          +1
        </button>
      </div>
    )
  }
}
ReactDOM.render(<ChangeThis1 />, document.getElementById('root'))

方案二：通過bind方法，更改事件處理函數(shù)中的this（了解即可）

在構(gòu)造函數(shù)中將事件處理函數(shù)中的this綁定為組件實例

// 方案二：通過bind方法，更改事件處理函數(shù)中的this（了解）
class ChangeThis2 extends React.PureComponent {
  constructor () {
    super()
    this.state = {
      count: 1
    }
    // 在構(gòu)造函數(shù)中將事件處理函數(shù)中的this綁定為組件實例
    // 1.下面代碼是右側(cè)內(nèi)容賦值給左側(cè)，此時this代表的 【ChangeThis2】 實例對象上并沒有handleClick函數(shù)，
    // 2.而是通過原型鏈拿到了原型對象上的 【handleClick】函數(shù)，并同過bind方法改變了this指向。
    // 3.bind方法返回一個新的函數(shù)，此時在this實例對象上我們手動創(chuàng)建了【newHandler】函數(shù)進行接收。
    // 4.最終事件綁定的處理函數(shù)，是實例對象上的【newHandler】。
    this.newHandleClick = this.handleClick.bind(this)
  }
  handleClick () {
    this.setState({ count: this.state.count + 3 })
  }
  render () {
    return (
      <div>
        <div>{this.state.count}</div>
        <button
          onClick={this.newHandleClick}
        >
          +1
        </button>
      </div>
    )
  }
}
ReactDOM.render(<ChangeThis2 />, document.getElementById('root'))
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • React介紹： 由facebook推出的數(shù)據(jù)驅(qū)動JS庫 基于MVC靈感設(shè)計（vue是基于mvvm） 特性：數(shù)據(jù)驅(qū)...
    拐服第一大碼猴閱讀 374評論 0贊 1
  • 本文內(nèi)容根據(jù)官方文檔整理 初始化項目查看本機npm版本create-react-app腳手架初始化代碼庫執(zhí)行，構(gòu)建...
    梁某人的劍閱讀 248評論 0贊 0
  • webpack運行項目知識 項目初始化 git init：將本地文件夾變成git可以管理的倉庫；開發(fā)過程中，要通過...
    果木山閱讀 422評論 0贊 0
  • 第一個React程序 函數(shù)式組件 class組件 組件的組合和嵌套 將一個組件渲染到另一個組件內(nèi)部構(gòu)成父子組件關(guān)系...
    null_7d53閱讀 342評論 0贊 0
  • 我們先來直觀認(rèn)識React，對任何而一種工具，只有使用才能夠熟練掌握，React也不例外。通過多Reac...
    六個周閱讀 1,265評論 3贊 18

友情鏈接更多精彩內(nèi)容