React學習（二）——元件的運用和資料傳遞
大家好，我是凱文，本篇文章主要圍繞React框架的元件以及元件之間資料的傳遞展開，並通過例項來實現特定的功能。下面先來簡單介紹一下React的元件，由本人學習實踐所得，用於做筆記，僅供參考。
React框架的一大特色就是它通過元件化的方式來構建和渲染前端頁面，瞭解過React基礎知識的小夥伴應該知道，React框架採取的是虛擬的DOM，也就是說，在呈現實際的Web頁面之前，首先編排出虛擬化的DOM元素，在確定了要顯示的內容和顯示方式後，再將HTML頁面渲染出來。
而元件就是頁面編排過程中很重要的組成部件，就像搭積木一樣，把元件一塊一塊地拼接起來，可以把這塊拼上去，也可以把那塊拆下來。具體知識各位可以參照React官方手冊。
瞭解了元件之後，就需要理解“Props”和“State”的用法。首先來介紹State，State按照字面意思理解為狀態，其代表著元件本身的屬性，State中可以儲存許多內容、引數，需要注意的是，State中的屬性只能在元件內部宣告和使用。
而Props是上一層的元件傳遞給下一層的引數，比如：有兩個元件，“main”和“view”，main是上一層的元件，view被包含在main當中，是main的子元件，那麼main元件就可以把引數通過Props傳遞給view元件。這一過程是不可逆的，無法從view傳回到main，也就涉及到了React框架的單向資料流的特性。如下圖所示：
下面就直接通過例項來介紹元件和資料傳遞。
在本人的上一篇文章中介紹了React專案的基本搭建方法，大家可以參考一下，也可以去網上查詢React專案搭建方法。這裡就不做太多介紹。
那我們先來建立一個React專案，並配置基礎的依賴包。建立和配置完後，專案目錄如下所示：
開啟public資料夾裡面有index.html檔案，下面來檢視該檔案內容。建議用文字編輯器進行操作，本人用的是VScode，直接將整個專案資料夾拖到VScode中開啟，可以看到如下目錄：
點選index.html就可以檢視該檔案的內容，刪去註釋的文字後，內容呈現如下：
我們可以看到，下方有一對<div>標籤，其id是“root”，React框架的渲染內容正是呈現在該標籤中。
下面，我們將src資料夾下的所有檔案都刪除，這是預設頁面的檔案，也就是直接在cmd中 npm start 看到的頁面內容。刪除以後，來建立屬於自己的index.js，這是主要渲染檔案，其他檔案都依附於此檔案進行展開。
建立index.js檔案，內容如下：
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<div>Hello World！</div>, document.getElementById('root'));
來分析一下，上面的兩行適用於引入react以及react-dom中的內容，是React框架的基礎依賴包，就像地基一樣，其中，ReactDOM提供渲染函式，也就是下方這一行所用的函式。
ReactDOM.render函式，就是將其中的內容渲染到上文中講道德index.html中id為“root”的標籤中。其中有兩個引數，第一個引數是一個<div>標籤，至於為什麼標籤能出現在js程式碼中，各位可以去查詢參照JSX和ES6相關知識。
標籤內容為Hello World！，是要顯示的內容，逗號右邊則是獲取“root”節點的語句。
之後在CMD命令列中載入資料夾地址，輸入：
npm start
然後就能在地址為 localhost:3000 的網頁中看到 Hello World！，現在可以顯示文字了，那麼元件該放在在哪裡呢。
下面在src目錄中建立一個 app.js 檔案，內容如下：
import React from 'react';
const App = () => (
<div>This is App</div>
);
export default App;
如上所示就是通過函式方式宣告一個名為App的元件，內容是This is App，下方的“export default App;”作用是將App元件釋出出去，也就是說其他檔案可以通過App這個名稱從該檔案中獲取App元件。
下面我們來改造index.js檔案內容,如下所示：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App/>, document.getElementById('root'));
從“./App”這個路徑中獲取App元件，然後放入在ReactDOM.render的第一個引數裡。
儲存完兩個檔案，不必重啟React專案，直接就能在 localhost:3000 中看到 This is App 現在我們就成功地建立並顯示了一個元件，App元件除了函式式宣告，還可以通過類的方式來宣告，內容如下：
import React from 'react';
class App extends React.Component {
render(){
return(<div>This is App</div>)
}
}
export default App;
這樣的宣告方式同樣可以在頁面中顯示 This is App ，render函式return的內容則為渲染內容，關於元件的宣告、構造等內容這裡不做過多解釋，各位可以參照上文中給出的React中文文件。
下面來介紹State和Props的運用，首先，我們在App.js檔案中宣告State中的屬性，如下所示：
import React from 'react';
class App extends React.Component {
constructor(props) { //建構函式
super(props);
this.state = {
text : 'This is TEXT!'
}
}
render(){
return(<div>{this.state.text}</div>)
}
}
export default App;
至於其中的細節請參照React文件，其中，this.state = { text : 'This is TEXT!' } 方法就是State的初始化方式，當這個元件被載入的時候，text這個屬性就被放到了state中。然後，我們在下方render函式return的標籤中輸入 { this.state.text }，“{ }”括號的作用是在標籤中使用js語句，該語句作用就是獲取該元件的state中的text屬性值。
然後就能在 localhost:3000 中看到 This is TEXT！
下面來介紹Props的用法，既然要用到Props，就需要再建立一個元件，將其命名為View。建立View.js檔案，內容如下所示：
import React from 'react';
class View extends React.Component {
constructor(props) { //建構函式
super(props);
this.state = {
}
}
render(){
return(<div>{this.props.text}</div>)
}
}
export default View;
其構造方式與App元件相似，只是在render函式中return的標籤內輸入{ this.props.text }，意思就是獲取並顯示上一個元件傳到這個元件的資料中名稱為“text”的屬性值。
同時也要改造一下App元件的內容：
import React from 'react';
import View from './View';
class App extends React.Component {
constructor(props) { //建構函式
super(props);
this.state = {
text : 'This is TEXT!'
}
}
render(){
let text = this.state.text;
return(<View text={text} />)
}
}
export default App;
在render函式裡，通過let建立一個變數text，獲取state中的text屬性的值。
然後再return裡面輸入<View/> 標籤，並在其中新增語句 text={ text }，意思就是將上面let的text變數傳輸到View元件中。
儲存兩個檔案，我們就能在網頁視窗中看到 This is TEXT！
雖然內容和之前一樣，但之前是由App元件顯示其State裡的屬性，而現在是由View元件獲取App元件傳來的Props中的text屬性，然後將其顯示出來。一個來自State，一個來自Props。
那麼，關於React元件以及其引數傳遞的介紹就到這裡，感謝各位，之後還會陸續更新React相關文章。
--------------------- 本文來自 技術學者凱文 的CSDN 部落格 ，全文地址請點選：https://blog.csdn.net/daxiazouyizou/article/details/79748078?utm_source=copy