03react基礎-組件1

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'))
使用class的實例方法,也是依賴箭頭函數不綁定this的原因
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容