項(xiàng)目頁面以組件形式層層搭起來，組件提高復(fù)用性，可維護(hù)性
目錄
一、函數(shù)組件
?二、類組件
三、 組件的事件綁定
四、獲取事件對(duì)象
五、事件綁定傳遞額外參數(shù)
六、組件狀態(tài)
初始化狀態(tài)
讀取狀態(tài)
修改狀態(tài)
七、組件-狀態(tài)修改counter案例
?八、this問題說明
九、總結(jié)?
一、函數(shù)組件
目標(biāo)：能夠獨(dú)立使用函數(shù)完成react組件的創(chuàng)建和渲染
函數(shù)組件概念：使用JS的函數(shù)（或者箭頭函數(shù)）創(chuàng)建的組件，就叫做 函數(shù)組件
函數(shù)組件的創(chuàng)建和渲染
//函數(shù)組建的創(chuàng)建
//創(chuàng)建
function Hello(){
return <div>hello這是一個(gè)函數(shù)組件</div>
}- 組件的名稱必須首字母大寫，react內(nèi)部會(huì)根據(jù)這個(gè)來判斷是組件還是普通的HTML標(biāo)簽
- 函數(shù)組件必須有返回值，表示該組件的 UI 結(jié)構(gòu)；如果不需要渲染任何內(nèi)容，則返回 null
- 組件就像 HTML 標(biāo)簽一樣可以被渲染到頁面中。組件表示的是一段結(jié)構(gòu)內(nèi)容，對(duì)于函數(shù)組件來說，渲染的內(nèi)容是函數(shù)的返回值就是對(duì)應(yīng)的內(nèi)容
- 使用函數(shù)名稱作為組件標(biāo)簽名稱，可以成對(duì)出現(xiàn)也可以自閉合
//函數(shù)組建的創(chuàng)建
//創(chuàng)建
function Hello(){
return <div>hello這是一個(gè)函數(shù)組件</div>;
}
//渲染 <Hello/> 自閉和
// <Hello></Hello>成對(duì)
function App() {
return (
<div className="App">
{/*渲染Hello組件 */}
<Hello/>
<Hello></Hello>
</div>
);
}
export default App;
?二、類組件
能夠獨(dú)立完成類組件的創(chuàng)建和渲染
- 類名稱也必須以大寫字母開頭
- 類組件應(yīng)該繼承 React.Component 父類，從而使用父類中提供的方法或?qū)傩?/li>
- 類組件必須提供 render 方法render 方法必須有返回值，表示該組件的 UI 結(jié)構(gòu)
// 引入React
import React from 'react'
// 定義類組件
class HelloComponent extends React.Component{
render(){
return <div>這是個(gè)一個(gè)類組件</div>
}
}
function App() {
return (
<div className="App">
{/*渲染Hello組件 */}
<Hello/>
<Hello></Hello>
<HelloComponent/>
<HelloComponent></HelloComponent>
</div>
);
}
三、 組件的事件綁定
前端開發(fā)所有交互都是基于事件
語法：
on + 事件名稱 ={事件處理程序}
例如? ：
function Hello(){
const clickHandler = () =>{
console.log('函數(shù)組件中的事件被觸發(fā)了');
}
return <div onClick={clickHandler}>hello這是一個(gè)函數(shù)組件</div>
}
注意，react事件采用駝峰命名法
類組件中例子，注意回調(diào)函數(shù)的寫法，標(biāo)準(zhǔn)寫法，實(shí)際工作中的寫法
class HelloComponent extends React.Component{
//事件回調(diào)函數(shù) 類中有寫法差別
//回調(diào)函數(shù)不加const 這是標(biāo)準(zhǔn)寫法，避免this指向問題
//這樣寫，回調(diào)函數(shù)中的this 指向的是當(dāng)前的組件實(shí)例對(duì)象
clickHandler =()=>{
console.log('類組件中的點(diǎn)擊事件觸發(fā)了');
}
render(){
return <div onClick={this.clickHandler}>這是個(gè)一個(gè)類組件</div>
}
}
四、獲取事件對(duì)象
獲取事件對(duì)象e只需要在事件的回調(diào)函數(shù)中補(bǔ)充一個(gè)形象e即可拿到
在函數(shù)組件中試一下，打印了一個(gè)對(duì)象，里面很多屬性
function Hello(){
const clickHandler = (e) =>{
console.log('函數(shù)組件中的事件被觸發(fā)了',e);
}
return <div onClick={clickHandler}>hello這是一個(gè)函數(shù)組件</div>
}
?為事件加個(gè)跳轉(zhuǎn)
?右側(cè)打印出，然后原頁跳轉(zhuǎn)了
如果只想打印，不想跳轉(zhuǎn)，那就要拿到事件對(duì)象e去阻止默認(rèn)行為
五、事件綁定傳遞額外參數(shù)
觸發(fā)事件傳遞自定義參數(shù)怎么做？
改造事件綁定為箭頭函數(shù) 在箭頭函數(shù)中完成參數(shù)的傳遞
1、只需要一個(gè)額外參數(shù) {clickHandler}? ?變成? ?{()=>clickHandler('自定義參數(shù)')}
2、既需要事件對(duì)象e也需要額外的參數(shù) {(e)=>clickHandler(e,'自定義參數(shù)')}
function Testl(){
const clickHandler=(msg)=>{
console.log('函數(shù)組件的事件被觸發(fā)了',msg)
}
return <div onClick={()=>clickHandler('this is msg')}>點(diǎn)擊這里</div>
}
function Testl(){
const clickHandler=(e,msg)=>{
console.log('函數(shù)組件的事件被觸發(fā)了',e, msg)
}
return <div onClick={(e) => clickHandler(e,'this is msg')}>點(diǎn)擊這里</div>
}
?類組件的事件綁定
整體和函數(shù)組件方式差別不大
唯一需要注意的是 因?yàn)樘幱赾lass類語境下，所定義事件回調(diào)函數(shù)以及寫法有不同
定義的時(shí)候: class Fields語法
使用的時(shí)候: 需要借助this關(guān)鍵詞獲取
import React from "react";
class CComponent extends React.Component {
// class Fields
clickHandler1 = (e, num) => {
// 這里的this指向的是正確的當(dāng)前的組件實(shí)例對(duì)象
// 可以非常方便的通過this關(guān)鍵詞拿到組件實(shí)例身上的其他屬性或者方法
console.log(this);
};
clickHandler2() {
// 這里的this 不指向當(dāng)前的組件實(shí)例對(duì)象而指向undefined 存在this丟失問題
console.log(this);
}
render() {
return (
<div>
<button onClick={(e) => this.clickHandler1(e, "123")}>click me 1</button>
<button onClick={this.clickHandler2}>click me 2</button>
</div>
);
}
}
function App() {
return (
<div>
<CComponent />
</div>
);
}
export default App;
?
六、組件狀態(tài)
學(xué)習(xí)目標(biāo)：能夠?yàn)榻M件添加狀態(tài)和修改狀態(tài)的值
在React hook 出來之前，函數(shù)式組件是沒有自己的狀態(tài)的，這里統(tǒng)一通過類組件來學(xué)習(xí)
初始化狀態(tài)、讀取狀態(tài)、修改狀態(tài)、影響視圖
初始化狀態(tài)
- 通過class的實(shí)例屬性state來初始化
- state的值是一個(gè)對(duì)象結(jié)構(gòu)，表示一個(gè)組件可以有多個(gè)數(shù)據(jù)狀態(tài)
class Counter extends React.Component { // 初始化狀態(tài) state = { count: 0 } render() { return <button>計(jì)數(shù)器</button> } }讀取狀態(tài)
- 通過this.state來獲取狀態(tài)
class Counter extends React.Component { // 初始化狀態(tài) state = { count: 0 } render() { // 讀取狀態(tài) return <button>計(jì)數(shù)器{this.state.count}</button> } }修改狀態(tài)
//組件狀態(tài) 類組件演示
import React from "react"
class TestComponent extends React.Component{
//1.定義組件狀態(tài)
state={
//這里可以定義各種屬性，全是當(dāng)前組件的狀態(tài)
name:'ggbond'
}
//事件回調(diào)函數(shù)
changName=()=>{
//3.修改狀態(tài)
//注意不可以直接賦值修改，必須通過一個(gè)方法setState
this.setState(
{name:'eebond'}
)
}
render(){
//使用狀態(tài)
return (
<div>
this is TestComponent
當(dāng)前name為：{this.state.name}
<button onClick={this.changName}>修改name</button>
</div>)
}
}
//根組件
function App(){
return (
<div>
<TestComponent/>
</div>
)
}
export default App
?點(diǎn)擊后?
- 語法
this.setState({ 要修改的部分?jǐn)?shù)據(jù) }) - setState方法作用
- 修改state中的數(shù)據(jù)狀態(tài)? ? ? 2.更新UI
- 思想
數(shù)據(jù)驅(qū)動(dòng)視圖，也就是只要修改數(shù)據(jù)狀態(tài)，那么頁面就會(huì)自動(dòng)刷新，無需手動(dòng)操作dom - 注意事項(xiàng)
不要直接修改state中的值，必須通過setState方法進(jìn)行修改
?總結(jié)：
1.編寫組件其實(shí)就是編寫原生類或者函數(shù)
2.定義狀態(tài)必須通過state實(shí)例屬性的方法提供一個(gè)對(duì)象，名稱是固定的就叫做state
3.修改state中的任何屬性 都不可以通過直接賦值?，必須走setState方法 ，這個(gè)方法來自于繼承得到
4.這里的this關(guān)鍵詞，很容易出現(xiàn)指向錯(cuò)誤，注意規(guī)范寫法
（事件回調(diào)函數(shù) 類中有寫法差別，回調(diào)函數(shù)不加const 這是標(biāo)準(zhǔn)寫法，避免this指向問題，這樣寫，回調(diào)函數(shù)中的this 指向的是當(dāng)前的組件實(shí)例對(duì)象）
類組件現(xiàn)在很少用，但老項(xiàng)目維護(hù)需要，這里是鞏固基礎(chǔ)
七、組件-狀態(tài)修改counter案例
//通過類組件修改狀態(tài)的方式 counter
import React from "react"
class Counter extends React.Component{
//通過state定義組件狀態(tài)
state={
count:0
}
//huitiaohanshu
changeCount =()=>{
//修改state
//react體系下 ‘?dāng)?shù)據(jù)不可變’ 要setState
this.setState(
{count:this.state.count + 1}
)
}
render(){
return (
<button onClick={this.changeCount}>{this.state.count}click</button>
)
}
}
//根組件
function App(){
return (
<div>
{/*渲染counter */}
<Counter />
</div>
)
}
export default App
?八、this問題說明
之前，寫react很麻煩，需要時(shí)刻注意this指向哪里，但現(xiàn)在不是事了，隨著js標(biāo)準(zhǔn)的發(fā)展，主流的寫法已經(jīng)變成了class fields，無需考慮太多this問題
import React from "react"
//this有問題的寫法
class Test extends React.Component{
constructor(){
super()
//用bind強(qiáng)行修正我們的this指向
//相當(dāng)于在類組件初始化階段 就可以把回調(diào)函數(shù)的this修正到
//永遠(yuǎn)指向當(dāng)前組件實(shí)例對(duì)象
this.handler=this.handler.bind(this)
}
handler(){
console.log(this)
//這里用this.setstate去修改數(shù)據(jù)還行嗎？會(huì)報(bào)錯(cuò)
//老輩會(huì)這樣做 construtor強(qiáng)綁定一個(gè)
}
render(){
return (
<button onClick={this.handler }>click</button>
)
}
}
//根組件
function App(){
return (
<div>
<Test/>
</div>
)
}
export default App未修正前：
?強(qiáng)行修正this指向后：? 得到對(duì)象
?還有一個(gè)做法
箭頭函數(shù)
import React from "react"
//this有問題的寫法
class Test extends React.Component{
handler(){
console.log(this)
}
render(){
console.log('父函數(shù)里的this指向?yàn)椋?,this)
return (
//不用constructor修正，直接在時(shí)間綁定的位置
//通過箭頭函數(shù) 直接沿用父函數(shù)中的this指向也是可以的,這里父函數(shù)是render
//那我們的箭頭函數(shù)中的this直接沿用 也是
<button onClick={()=> this.handler() }>click</button>
)
}
}
//根組件
function App(){
return (
<div>
<Test/>
</div>
)
}
export default App同樣出來的也是對(duì)象
?看下父函數(shù)this指向
注意
沒必要用這兩個(gè)修正方案，知道有這兩個(gè)方法就行，只需要記住案例中的標(biāo)準(zhǔn)寫法就行?
文章來源：http://www.zghlxwxcb.cn/news/detail-674808.html
九、總結(jié)?
文章來源地址http://www.zghlxwxcb.cn/news/detail-674808.html
到了這里，關(guān)于React入門 組件學(xué)習(xí)筆記的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
