React：組件基礎(chǔ)篇
目錄
創(chuàng)建項(xiàng)目
函數(shù)組件（無狀態(tài)組件）
類組件（有狀態(tài)組件）
函數(shù)組件綁定事件
通過類組件綁定事件
react事件對(duì)象
state基本使用
受控組件
非受控組件
創(chuàng)建項(xiàng)目
執(zhí)行“nvm list”命令，查看當(dāng)前所選擇node的版本，因?yàn)槲译娔X上有幾個(gè)不同的node版本，所以需要確認(rèn)下，版本是否是react腳手架要求的。
如果發(fā)現(xiàn)node版本不是我們想要的，執(zhí)行“nvm use 版本號(hào)”命令即可。
執(zhí)行“npx create-react-app react-component”命令，創(chuàng)建項(xiàng)目。
執(zhí)行“cd react-component”命令，進(jìn)入文件夾內(nèi)
執(zhí)行“npm start”命令，啟動(dòng)項(xiàng)目，ok
函數(shù)組件
無狀態(tài)組件（函數(shù)組件），負(fù)責(zé)靜態(tài)結(jié)構(gòu)展示
1、導(dǎo)入react
import React from 'react';
import ReactDOM from 'react-dom';
2、創(chuàng)建函數(shù)組件，這里有兩種方式。
第一種
function Hello() { ?return (<div>這是我的第一個(gè)函數(shù)組件</div>)}
第二種
const Hello = () => (<div>這是我的第二個(gè)函數(shù)組件</div>)
3、渲染組件
ReactDOM.render(<Hello/>, document.getElementById('root'))
完整代碼如下：
類組件
有狀態(tài)組件（類）組件，負(fù)責(zé)更新UI，讓頁面動(dòng)起來
1、創(chuàng)建類組件
class Hello extends React.Component {
?
????render() {
? ?
????????return (<div>第一個(gè)類組件</div>)
?
????}?
}
2、渲染組件
ReactDOM.render(<Hello/>, document.getElementById('root'))
完整代碼如下：
函數(shù)組件綁定事件
1、創(chuàng)建函數(shù)組件
function App() {
?
????// 事件處理程序
?
????function handleClick() {
? ?console.log('函數(shù)組件，事件觸發(fā)')
?}
????return (
? ?<button onClick={handleClick}>點(diǎn)我</button>
?)?
}
2、渲染組件
ReactDOM.render(<App/>, document.getElementById('root'))
完整代碼如下：
通過類組件綁定事件
1、創(chuàng)建類組件
class App extends React.Component { ?
?
????// 事件處理程序 ?
?
????handleClick() { ? ?console.log("類組件綁定事件，觸發(fā)") ?} ?
????????render() { ? ?
????????return (<button onClick={this.handleClick}>點(diǎn)我</button>) ?
????}
}
2、渲染組件
ReactDOM.render(<App/>, document.getElementById('root'))
完整代碼如下：
React事件對(duì)象
1、阻止瀏覽器的默認(rèn)行為
class App extends React.Component { ?
?
????// 事件處理程序 ?
?
????handleClick(e) { ? ?
? ?
????// 阻止瀏覽器的默認(rèn)行為 ? ?
? ?
????e.preventDefault() ? ?
? ?
????console.log("a標(biāo)簽單擊事件觸發(fā)") ?
?
????} ?
?
????render() { ? ?
? ?
????????return (
? ? ?<a href="https://www.baidu.com/" onClick={this.handleClick}>百度一下</a>
? ?) ?
?
????}?
}
2、渲染組件
ReactDOM.render(<App/>, document.getElementById('root'))
完整代碼如下
state基本使用
1、創(chuàng)建類組件
class App extends React.Component { ?
?
????// 初始化state ?
?
????state = { count: 100} ?
?
????// 事件處理程序 ?
?
????onIncrement = () => { ? ?
? ?
????????this.setState({ ? ? ?count : this.state.count - 1 ? ?}) ?
????} ?
?
????render() { ? ?
? ?
????????return ( ? ? ?
? ? ?
????????????<div> ? ? ? ?
? ? ?
????????????????<h1>計(jì)數(shù)器：{this.state.count}</h1> ? ? ? ??
????????????????<button onClick={this.onIncrement}> -1 </button> ? ? ?
???????? </div> ??
????????)? ?
????????}
}
2、渲染組件
ReactDOM.render(<App/>, document.getElementById('root'))
完整代碼如下：
受控組件：其值受到React控制的表單元素
1、創(chuàng)建類組件
class App extends React.Component { ? ?
?
????state = { ? ? ?
? ?
????????txt: '', ? ? ?
? ?
????????content: '', ? ? ?
? ?
????????language: 'java', ? ? ?
? ?
????????isChecked: false ? ?
?
????} ? ?
?
????// 處理變化 ? ?
?
????handleForm = e => { ? ? ?
? ?
????????// 獲取當(dāng)前DOM對(duì)象 ? ? ?
? ?
????????const target = e.target ? ? ?
? ?
????????// 根據(jù)表單類型獲取值 ? ? ?
? ?
????????const value = target.type === 'checkbox' ? target.checked : target.value ? ? ?
? ?
????????// 獲取name ? ? ?
? ?
????????const name = target.name ? ? ?
? ?
????????// 根據(jù)name屬性設(shè)置對(duì)應(yīng)state ? ? ?
? ?
????????this.setState({ ? ? ? ?[name]: value ? ? ?}) ?
?
????} ? ?
?
????render() { ? ? ?
? ?
????????return ( ? ? ? ?
? ? ?
????????????<div> ? ? ? ? ?
? ? ?
????????????{/* 文本框 */} ? ? ? ? ?
? ? ?
????????????<input type="text" name="txt" value = {this.state.txt} onChange={this.handleForm}/> ? ? ? ? ?
?
????????????<br/> ? ? ? ? ?
?
????????????{/* 富文本框 */} ? ? ? ? ?
?
????????????<textarea name="content" value={this.state.content} onChange={this.handleForm}></textarea> ? ? ? ? ?
?
????????????<br/> ? ? ? ? ?
?
????????????{/* 下拉框 */} ? ? ? ? ?
?
????????????<select name="language" value={this.state.language} onChange={this.handleForm}> ? ? ? ? ? ?
?
????????????????<option value="java">java</option> ? ? ? ?
????????????????<option value="javaScript">javaScript</option>
????????????????<option value="c">C</option> ? ? ? ? ?
?
????????????</select> ? ? ? ? ?
?
????????????<br/> ? ? ? ? ?
?
????????????{/* 復(fù)選框 */} ? ? ? ? ?
?
????????????<input name="isChecked" type="checkbox" checked={this.state.isChecked} onChange={this.handleForm}/> ? ? ? ?
?
????????</div> ? ? ?
?
????????) ? ??
????} ??
}
2、渲染組件
ReactDOM.render(<App/>, document.getElementById('root'))
完整代碼如下：
非受控組件，不推薦使用，知道即可
1、創(chuàng)建類組件
class App extends React.Component { ? ?
??
????constructor(){ ? ? ?
? ??
????????super() ? ? ?
? ??
????????// 創(chuàng)建ref ? ? ?
? ??
????????this.txtRef = React.createRef() ? ?
??
????} ?
??
????// 獲取文本框的值 ? ?
??
????getTxt = () => { ? ? ?
? ??
????????console.log("文本框值為：", this.txtRef.current.value); ? ?
? ????} ? ?
??
????render() { ? ? ?
? ??
????????return ( ? ? ? ?
? ? ??
????????????<div> ? ? ? ? ?
? ? ??
????????????????<input type="text" ref={this.txtRef}/> ? ? ??
????????????????<button onClick={this.getTxt}>獲取文本框的值</button> ? ? ? ?
???? </div> ? ? ??
????????) ? ??
????} ?
}
2、渲染組件
ReactDOM.render(<App/>, document.getElementById('root'))
完整代碼如下：
注意事項(xiàng)
組件的兩種創(chuàng)建方式：函數(shù)組件和類組件(注意首字母大寫)
無狀態(tài)組件（函數(shù)）組件，負(fù)責(zé)靜態(tài)結(jié)構(gòu)展示
有狀態(tài)組件（類）組件，負(fù)責(zé)更新UI，讓頁面動(dòng)起來
綁定事件注意this指向問題
推薦使用受控組件來處理表單
寫在最后
好兄弟可以點(diǎn)贊并關(guān)注我的公眾號(hào)“javaAnswer”，全部都是干貨。
