React基礎知識（一）

World_Mei發表於2020-11-17
React

這裡寫目錄標題

一、搭建React工作環境：

1、React 特點

  • 1.宣告式設計 −React採用宣告正規化，可以輕鬆描述應用。
  • 2.高效 −React通過對DOM的模擬，最大限度地減少與DOM的互動。
  • 3.靈活 −React可以與已知的庫或框架很好地配合。
  • 4.JSX − JSX 是 JavaScript 語法的擴充套件。React 開發不一定使用 JSX ，但我們建議使用它。
  • 5.元件 − 通過 React 構建元件，使得程式碼更加容易得到複用，能夠很好的應用在大專案的開發中。
  • 6.單向響應的資料流 − React 實現了單向響應的資料流，從而減少了重複程式碼，這也是它為什麼比傳統資料繫結更簡單。

2、React 安裝

可以直接使用 Staticfile CDN 的 React CDN 庫，地址如下：

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

官方提供的 CDN 地址：

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生產環境中不建議使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

練習中我採用伺服器方式：

 <script type="text/javascript" src="js/react.development.js"></script>
 <script type="text/javascript" src="js/react-dom.development.js"></script>
 <script type="text/javascript" src="js/babel.min.js"></script>
 <script type="text/babel" src="js/index.js"></script>

3、環境安裝中引入了三個庫

1、React的核心庫：react.development.js。
2、React進行Dom操作的庫：react-dom.development.js。
3、將JSX語言轉換為JavaScript語言庫：babel.min.js。Babel 可以將 ES6 程式碼轉為 ES5 程式碼，這樣我們就能在目前不支援 ES6 瀏覽器上執行 React 程式碼。Babel 內嵌了對 JSX 的支援。通過將 Babel 和 babel-sublime 包（package）一同使用可以讓原始碼的語法渲染上升到一個全新的水平。

4、頁面的啟動問題

如果我們將所有的React程式碼都書寫在HTML文件中，則頁面的啟動不需要伺服器。
如果我們將所有的React程式碼都書寫在獨立的js檔案中，則頁面的啟動需要伺服器。

頁面的啟動是否需要伺服器取決於引入的以下程式碼：

<script type="text/babel" src="js/index.js"></script>

react不是原生的JavaScript，引用的是JSX的格式，所以index.js檔案中不是純的js格式，那麼index.js檔案在引入的時候type屬性的不是text/javascript，而是text/babel。這個text/babel引入如果是獨立的js檔案則必須使用伺服器開啟，如果沒有src，直接寫類似於內聯的樣式則不需要伺服器。

二、第一個React程式：Hello，React！

1、React的核心方法

ReactDOM.render(JSX程式碼,DOM Node)
render方法有兩個引數，第一個引數是JSX程式碼，第二個引數是DOM節點。
功能：將JSX程式碼生成的HTML節點放入指定的DOM節點中。

body標記中書寫掛載點#app,index.js檔案中書寫核心程式碼。

<body>
    <div id="app"></div>
</body>

ReactDOM.render(
    <h1>Hello React!</h1>,
    document.querySelector('#app')
)

2、JSX程式碼必須具備一個根節點。

如果render函式的第一個引數出現兩個平行的標記則會報錯，如下：

ReactDOM.render(
    <h1>Hello React!</h1>
    <p>初識React</p>,
    document.querySelector('#app')
)

在這裡插入圖片描述
正確的寫法：用一個根節點包裹這些節點。如下：div

ReactDOM.render(
    <div>
        <h1>Hello React!</h1>
        <p>初識React</p>
    </div>,
    document.querySelector('#app')
);

3、JSX是HTML和JavaScript語言的混合。

語法格式：
（1）HTML程式碼必須用<>擴住。
（2）JavaScript程式碼必須用{}擴住。
在HTML程式碼中嵌入的JavaScript程式碼必須是一個陣列

例 ：做一個陣列，在頁面中利用React技術將陣列元素渲染為一個無序列表。

方法一：將對陣列的操作放在核心方法內

let list=['a','b','c','d'];

ReactDOM.render(
    <div>
        <h1>Hello React!</h1>
        <p>初識React</p>
        <ul>
            {
                list.map(item=>{
                    return <li>{item}</li>
                })
            }
        </ul>
    </div>,
    document.querySelector('#app')
);

方法二：將對陣列的操作放在核心方法以外，並最終生成陣列。

let list=['a','b','c','d'];
let array=[];
for(let i=0;i<list.length;i++){
    array.push(<li>{list[i]}</li>);
}

ReactDOM.render(
    <div>
        <h1>Hello React!</h1>
        <p>初識React</p>
        <ul>
            {
                // list.map(item=>{
                //     return <li>{item}</li>
                // })
                array
            }
        </ul>
    </div>,
    document.querySelector('#app')
);

此方法中定義變數array必須賦初值。

三、React元件：

1、格式：採用ES6對於類的定義方法

class 元件名 extends React.Component{
	// constructor是建構函式，props是接收的引數
    constructor(props){
       super(props);
	}
	render(){
	   return (
	      JSX程式碼
		)
	}
}

例：

class Book extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return (
            <div>
                <h1>歡迎學習React元件</h1>
                <hr></hr>
            </div>
        )
    }
};

ReactDOM.render(
    <div>
        <Book></Book>
    </div>,
    document.querySelector('#app')
);

例子小結：

1）React元件是採用es6對類的定義。
2）React元件名必須用大寫字母開頭。
3）元件中html程式碼必須有一個根節點。

2、為元件中的HTML元素繫結事件

例：

class Book extends React.Component{
    constructor(props){
        super(props);
    }
    //h1的單擊事件
    h1click(){
        alert('h1被單擊了')
    }
    render(){
        return (
            <div>
                <h1 onClick={this.h1click}>歡迎學習React元件</h1>
                <hr></hr>
            </div>
        )
    }
};

ReactDOM.render(
    <div>
        <Book></Book>
    </div>,
    document.querySelector('#app')
);

案例小結：

1）在react中事件都是以on加首字母大寫的事件型別名（如onClick、onChange、onFocus等）。
2）程式碼中this預設指向元件Book。
在這裡插入圖片描述

3、如何定義資料區

下面還是以一個小案例來學習資料區：
在這裡插入圖片描述
修改程式碼如下圖：
在這裡插入圖片描述
在這裡插入圖片描述
此時我們看下瀏覽器和控制檯的輸出情況：如下圖
在這裡插入圖片描述
案例小結：

（1）資料區定義在元件的建構函式中，以類的屬性來進行定義。
（2）在JSX程式碼中如何呼叫資料區中的資料：{this.state.變數名}
（3）在方法中this預設是undefind，那如何使用指向元件的this呢，可在呼叫的時候通過bind(this)改變this指向：
（4）如何修改資料區中的資料：this.setState({ a:200})
（5）在元件的使用過程中，可以通過類似於HTML屬性的格式向元件定義部分傳遞引數。

相關文章