React中DOM事件和狀態介紹
DOM事件
react中綁定事件的語法跟html中為元素綁定事件的語法相似，
html中綁定事件：
<div onclick="fn"></div>
react中綁定事件
<div onClick={this.fn}></div>
註意：
- 1 事件名稱首字母必須大寫
- 2 事件回調函數定義在組件中，我們通過插值語法引入綁定
- 3 事件回調函數不能執行（後面不能添加參數集合()）
綁定的是一個未執行的方法
參數
React使用瞭事件委托模式實現事件的綁定（事件委托模式特點：1 減少事件數量， 2 預言未來元素， 3 防止內存外泄）
vue沒有實現事件委托，參數就是源生的事件對象
jquery實現瞭事件委托模式，參數是jquery封裝後的事件對象
react中的DOM事件是基於事件委托模式實現的，因此參數就是react封裝的事件對象（16版本就一個參數）
因此可以通過事件對象準確的獲取綁定事件的元素，以及觸發事件的元素。
作用域
react中的DOM事件回調函數
ES5開發中，this指向組件實例化對象，並且是不能改變的
ES6開發中，this默認是undefined，我們未來訪問組件中的其他數據，我們要綁定作用域
改變作用域由兩種方式：
- 第一種，使用ES5提供的bind方法，改變作用域
- 第二種，使用ES6提供的箭頭函數，是定義時的作用域
一旦改變瞭作用域，我們是可以傳遞自定義參數的
bind方式改變的作用域，傳遞的自定義參數始終在事件對象前面
箭頭函數改變的作用域，傳遞的自定義參數可以在任何位置。
在ES6開發中，事件回調函數允許我們綁定其他的對象，但是工作中，不建議綁定組件之外的其他對象
舉例：
// 定義類
class Demo extends Component {
// 事件回調函數
clickBtn(e) {
console.log(this, arguments)
// console.log(e.target, e.currentTarget)
}
// 渲染
render() {
return (
<div>
<button onClick={this.clickBtn}><span>按鈕</span>1</button>
{/*更改this*/}
<button onClick={this.clickBtn.bind(this, 100, 'hello', true)}>按鈕2</button>
<button onClick={e => this.clickBtn(100, e, 'demo', false)}>按鈕3</button>
{/*工作中，不建議綁定組件之外的其他對象*/}
<button onClick={this.clickBtn.bind(obj)}>按鈕4</button>
</div>
)
}
}
狀態
組件有兩類數據，一類是屬性數據，一類就是狀態數據
屬性數據是在組件外部傳遞給組件的，因此在組件外部維護
狀態數據是在組件內部使用的，因此在組件內部維護
根據組件是否有狀態數據，可以將組件分成兩類，一類是無狀態是組件，一類是有狀態組件
無狀態組件
如果組件創建完成，組件就是一成不變的，組件不會產生交互，不會發送請求，這類組件就是無狀態組件
我們目前所學習的組件，都是無狀態組件
無狀態組件還可以簡寫成一個函數
無狀態組件也叫state less component
有狀態組件
如果組件創建完成後，會與用戶產生交互，會發送異步請求等等，在組件內部就會產生數據，為瞭維護這部分數據，我們可以將這部分數據放在狀態中，這樣的組件就是有狀態組件。
這裡的數據就是狀態數據
使用狀態數據
使用狀態數據跟使用屬性數據一樣，也是通過this.state來使用。
初始化狀態數據
我們在組件的構造函數中，初始化狀態數據。
es6中通過constructor定義構造函數，由於我們的組件繼承瞭Component組件基類，
並且重寫瞭構造函數constructor，為瞭在構造函數內實現構造函數繼承，我們要使用super關鍵字
構造函數有props屬性數據參數，為瞭繼承它，我們要將props參數傳遞給super方法
super(props);
如果不傳遞：在構造函數中，this.props目前是undefined
由於繼承瞭props，所以在構造函數中props和this.props沒有區別瞭
初始化狀態
在構造函數中，通過為this.state賦值即可。
註意：由於在構造函數中，我們可以訪問屬性數據，因此我們可以用屬性數據為狀態數據賦值，這樣可以實現數據有外部流入內部（工作中常見）
修改狀態數據
組件提供瞭一個this.setState的方法，可以在組件內部修改狀態數據
參數是對象
key表示狀態屬性數據名稱
value表示狀態數據值
註意：無論是組件的屬性數據發生改變，還是狀態數據發生改變，組件都會執行render方法。
// 無狀態組件內部不需要維護數據，因此可以簡寫成函數
let Demo = () => <button>按鈕</button>
// 定義換一換組件
class Demo extends Component {
// 初始化狀態數據
constructor(props) {
// 構造函數繼承
super(props);
// console.log(this.props, props)
// 初始化狀態
this.state = {
num: 0
}
}
// 定義子視圖列表
createChildList(arr) {
// 將數組成員轉成span
return arr.map((item, index) => <span key={index}>{item}</span>)
}
// 創建新聞列表
createList() {
// console.log(this)
// 獲取數據長度
let len = this.props.data.length;
return this.props.data.map((item, index) => {
// 遍歷第二維數組,如果num與index相等，要顯示
return <li key={index} style={{
display: this.state.num % len === index ? '' : 'none'
}}>{this.createChildList(item)}</li>
})
}
// 事件回調函數
toggle() {
// 更新num
// var num = this.state.num;
// // 下一頁
// num++;
// 更新狀態
// this.setState({ num })
// 簡化成一步
this.setState({
// 先加再更新
num: ++this.state.num
})
}
// 定義渲染方法
render() {
return (
<div>
{/*<span onClick={this.toggle.bind(this)}>換一換</span>*/}
<span onClick={e => this.toggle(e)}>換一換</span>
{/*新聞列表*/}
<ul>{this.createList()}</ul>
</div>
)
}
}
到此這篇關於React中DOM事件和狀態介紹的文章就介紹到這瞭,更多相關React事件和狀態內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！