react組件的創建方式
一.函數創建組件
- 約定1:函數名稱必須以大寫字母開頭
- 約定2:函數組件必須有返回值,表示該組件的結構
- 函數組件:使用JS的函數創建組件
- 如果返回值為null,表示不渲染任何內容
示例demo
①編寫函數組件(普通函數)
import React from 'react'
import ReactDOM from 'react-dom'
function Hello() {
return (
<div>這是我的第一個函數組件</div>
)
}
利用ReactDOM.render()進行渲染
ReactDOM.render(<Hello />, document.getElementById('root'))
②使用箭頭函數創建組件
import React from 'react'
import ReactDOM from 'react-dom'
// 使用箭頭函數創建組件:
const Hello = () => <div>這是我的第一個函數組件</div>
// 渲染組件
ReactDOM.render(<Hello />, document.getElementById('root'))
二.使用類創建組件
- 使用ES6語法的class創建的組件
-
約定1
:類名稱也必須要大寫字母開頭 -
約定2
:類組件應該繼承React.Component父類,從而可以使用父類中提供的方法或者屬性 -
約定3
:類組件必須提供 render 方法 -
約定4
:render方法中必須要有return返回值
import React from 'react'
import ReactDOM from 'react-dom'
// 創建類組件
class Hi extends React.Component {
render () {
// 創建class類,繼承React.Component,在里面提供render方法,在return里面返回內容
return (
<h1>1234</h1>
)
}
}
// 渲染組件
ReactDOM.render(<Hi />, document.getElementById('root'))
抽離成單獨的JS文件
示例demo
- 創建Hello.js
- 1.在Hello.js 中導入React,創建組件,在Hello.js中導出
import React from 'react'
// 1.創建組件
class Hello extends React.Component {
render() {
return (
<div>這是我的第一個抽離到js文件中的組件</div>
)
}
}
// 2.導出組件
export default Hello
2.在index.js中導入Hello組件,渲染到頁面
import Hello from './js/Hello'
ReactDOM.render(<Hello />,document.getElementById('root'))
事件
事件綁定
- React事件綁定語法與DOM事件語法相似
- 語法:on+事件名稱=事件處理函數,比如 onClick = function(){}
- 注意:React事件采用駝峰命名法
demo1.類組件的事件
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
// 事件處理程序
handleClick() {
console.log('單擊事件觸發了')
}
render() {
return (
<button onClick={this.handleClick}>點我,點我</button>
)
}
}
// 渲染組件
ReactDOM.render(<App />, document.getElementById('root'))
demo2:通過函數組件綁定事件:
import React from 'react'
import ReactDOM from 'react-dom'
// 通過函數組件綁定事件:
function App() {
// 事件處理程序
function handleClick() {
console.log('函數組件中的事件綁定,事件觸發了')
}
return (
<button onClick={handleClick}>點我</button>
)
}
// 渲染組件
ReactDOM.render(<App />, document.getElementById('root'))
- 在React中綁定事件與原生很類似
- 需要注意點在于,在React綁定事件需要遵循駝峰命名法
- 類組件與函數組件綁定事件是差不多的,只是在類組件中綁定事件函數的時候需要用到
this
,代表指向當前的類的引用,在函數中不需要調用this
事件對象
- 可以通過事件處理函數的參數獲取到事件對象
- React中的事件對象叫做:合成事件
- 合成事件:兼容所有瀏覽器,無需擔心跨瀏覽器兼容問題
- 除兼容所有瀏覽器外,它還擁有和瀏覽器原生事件相同的接口,包括
stopPropagation()
和preventDefault()
- 如果你想獲取到原生事件對象,可以通過
nativeEvent
屬性來進行獲取
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
handleClick(e) {
// 阻止瀏覽器的默認行為
e.preventDefault()
console.log('a標簽的單擊事件觸發了')
}
render() {
return (
<a onClick={this.handleClick}>打開百度</a>
)
}
}
// 渲染組件
ReactDOM.render(<App />, document.getElementById('root'))
有狀態組件和無狀態組件
- 函數組件又叫做
無狀態組件
,類組件又叫做有狀態組件
- 狀態
(state)
即數據 - 函數組件沒有自己的狀態,
只負責數據展示
- 類組件有自己的狀態,
負責更新UI
,讓頁面動起來
image.png
State和SetState
state基本使用
- 狀態(state)即數據,是組件內部的私有數據,只能在組件內部使用
- state的值是對象,表示一個組件中可以有多個數據
- 通過this.state來獲取狀態
demo:
export default class extends React.Component {
constructor(){
super()
// 第一種初始化方式
this.state = {
count : 0
}
}
// 第二種初始化方式
state = {
count:1
}
render(){
return (
<div>計數器 :{this.state.count}</div>
)
}
}
setState() 修改狀態
- 狀態是可變的
- 語法:this.setState({要修改的數據})
- 注意:不要直接修改state中的值,這是錯誤的
- setState() 作用:1.修改 state 2.更新UI
import React from 'react'
import ReactDOM from 'react-dom'
/*
state的基本使用
*/
class App extends React.Component {
state = {
count: 0,
test: 0
}
render() {
return (
<div>
<h1>計數器:{ this.state.count }</h1>
<h1>計數器:{ this.state.test }</h1>
<button onClick={() => {
this.setState({
count: this.state.count +=3,
test:this.state.test -=3
})
// 錯誤!!!
// this.state.count += 1
}}>+1</button>
</div>
)
}
}
// 渲染組件
ReactDOM.render(<App />, document.getElementById('root'))
image.png
抽取事件處理函數
當我們把上面代碼的事件處理程序抽取出來后,會報錯,找不到this
image.png
在JSX中我們寫的事件處理函數可以找到this,原因在于在JSX中我們利用箭頭函數,箭頭函數是不會綁定this,所以會向外一層去尋找,外層是render方法,在render方法里面的this剛好指向的是當前實例對象
事件綁定this指向(3種)
1.箭頭函數
-
利用箭頭函數自身不綁定this的特點
image.png
2.利用bind方法
利用原型bind方法是可以更改函數里面this的指向的,所以我們可以在構造中調用bind方法,然后把返回的值賦值給我們的函數即可
import React from 'react'
import ReactDOM from 'react-dom'
/*
從JSX中抽離事件處理程序
*/
class App extends React.Component {
constructor() {
super()
this.state = {
count: 0
}
this.onIncrement = this.onIncrement.bind(this)
}
// 事件處理程序
onIncrement() {
console.log('事件處理程序中的this:', this)
this.setState({
count: this.state.count + 1
})
}
render() {
return (
<div>
<h1>計數器:{ this.state.count }</h1>
<button onClick={this.onIncrement}>+1</button>
</div>
)
}
}
// 渲染組件
ReactDOM.render(<App />, document.getElementById('root'))
3.class的實例方法
- 利用箭頭函數形式的class實例方法
- 注意:該語法是實驗性語法,但是,由于babel的存在可以使用
import React from 'react'
import ReactDOM from 'react-dom'
/*
從JSX中抽離事件處理程序
*/
class App extends React.Component {
state = {
count: 0
}
// 事件處理程序
onIncrement = () => {
console.log('事件處理程序中的this:', this)
this.setState({
count: this.state.count + 1
})
}
render() {
return (
<div>
<h1>計數器:{ this.state.count }</h1>
<button onClick={this.onIncrement}>+1</button>
</div>
)
}
}
// 渲染組件
ReactDOM.render(<App />, document.getElementById('root'))