初識(shí)React(3)：組件

FullStackDeveloper 發(fā)布于2019-08-26 12:19 / 3494人閱讀

摘要：創(chuàng)建組件創(chuàng)建組件之前要注意以下幾點(diǎn)組件創(chuàng)建的名稱首字母得大寫組件中返回的只能是一個(gè)根節(jié)點(diǎn)，所有的內(nèi)容得用一個(gè)元素都框起來(lái)無(wú)狀態(tài)函數(shù)式組件無(wú)狀態(tài)函數(shù)式組件可以理解成就是一個(gè)函數(shù)生成的，使得代碼的可讀性更好，并且精簡(jiǎn)便利，減少了冗余，無(wú)狀態(tài)組件

創(chuàng)建組件

創(chuàng)建組件之前要注意以下幾點(diǎn)：

組件創(chuàng)建的名稱首字母得大寫

組件中返回的JSX只能是一個(gè)根節(jié)點(diǎn)，所有的內(nèi)容得用一個(gè)元素都框起來(lái)

1.無(wú)狀態(tài)函數(shù)式組件

無(wú)狀態(tài)函數(shù)式組件可以理解成就是一個(gè)函數(shù)生成的，使得代碼的可讀性更好，并且精簡(jiǎn)、便利，減少了冗余，無(wú)狀態(tài)組件有以下特點(diǎn)：

組件無(wú)法被實(shí)例化，整體渲染提高

組件不能訪問(wèn)this對(duì)象，因?yàn)闆](méi)有實(shí)例化，所以無(wú)法訪問(wèn)到this對(duì)象

組件沒(méi)有生命周期

無(wú)狀態(tài)組件只能訪問(wèn)輸入的props，沒(méi)有state狀態(tài)

import React from "react"
import { connect } from "dva";

 function CreateComponent(props) {
   console.log(props);
   return (
     
        {props.name}今年{props.age}歲
     
   )
 }

export default connect(state => ({
  name:"小明",
  age:15
}))(CreateComponent);

2.React.Component類組件

每個(gè)組件類必須要實(shí)現(xiàn)一個(gè)render方法，這里要特別注意，這個(gè)render方法必須要返回一個(gè)JSX元素即要用一個(gè)最外層的元素將所有內(nèi)容都包裹起來(lái)，如果返回并列多個(gè)JSX元素是不合法，如下所示：

import React from "react"

class CreateComponent extends React.Component {
     render() {
       return(
         
           標(biāo)題
            
              首先
              其次
              最后
            
         
       )
     }
}

export default CreateComponent;

以上實(shí)例，就是把h2元素和ul用一個(gè)div都給包起來(lái)

1.組件的事件監(jiān)聽(tīng)

import React from "react"

class CreateComponent extends React.Component {

   clickFunc = (e) => {
     console.log("監(jiān)聽(tīng):",e.target.innerHTML);
   }

   clickValue = (value) => {
     console.log(value);
   }
    render() {
      return (
       
         監(jiān)聽(tīng)事件
         

         this對(duì)象
      
      )
    }

}

export default CreateComponent;

以上就是事件監(jiān)聽(tīng)和傳參實(shí)例

2.組件的state和setState

通常在組件中，state是用來(lái)放這個(gè)組件內(nèi)部參數(shù)的狀態(tài)的，而setState是用來(lái)改變state里面的參數(shù)，例如：

import React from "react"

class CreateComponent extends React.Component {
  state = {
    flag : true
  }
   clickValue = () => {
     this.setState({
       flag: !this.state.flag
     })
   }
    render() {
      return (
       
         flag的值為：{this.state.flag ? "真" : "假"}
         

         
      
      )
    }

}

export default CreateComponent;

3.組件的props

props是組件里面的屬性，在組件內(nèi)部是不能更改自己本身的props的，比如，建立一個(gè)組件，然后在另外一個(gè)組件里面調(diào)用這個(gè)組件，如下：

import React from "react";

function NewComponent(props) {
  return (
    
       {props.content}
    
  );
}


export default NewComponent;

建立一個(gè)組件NewComponent,然后調(diào)用，如下：

import React from "react"
import NewComponent from "./newComponent.js"

class CreateComponent extends React.Component {
    render() {
      return (
       
         
      
      )
    }

}

export default CreateComponent;

從這里可以看出，props就是組件帶入的屬性值，props其實(shí)就是讓外部組件對(duì)自己進(jìn)行配置，而state是組件控制自己的狀態(tài)

4.組件的生命周期

constructor組件初始化：

constructor初始化一些參數(shù)屬性等等

componentWillMount組件渲染之前：

componentWillMount這個(gè)函數(shù)在react16.3.0之后慢慢的被棄用了，使用componentDidMount替換

componentDidMount組件渲染之后：

componentDidMount在組件渲染之后實(shí)行，可以加載數(shù)據(jù)

render組件渲染：

render組件渲染顯示頁(yè)面

import React from "react"

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log("construct:頁(yè)面初始化")
  }

  componentWillMount () {
    console.log("componentWillMount：頁(yè)面將要渲染")
  }

  componentDidMount () {
    console.log("componentDidMount：頁(yè)面渲染結(jié)束")
  }


    render() {
      console.log("render：頁(yè)面渲染");
      return (
       
         頁(yè)面渲染
      


      )
    }

}

export default CreateComponent;

輸出結(jié)果：

construct:頁(yè)面初始化
componentWillMount：頁(yè)面將要渲染
render：頁(yè)面渲染
componentDidMount：頁(yè)面渲染結(jié)束

componentWillUnmount組件刪除

componentWillUnmount函數(shù)是在組件要?jiǎng)h除之前執(zhí)行的函數(shù)，如下代碼：

import React from "react";

class NewComponent extends React.Component {
  componentWillUnmount() {
    console.log("componentWillUnmount:將要從頁(yè)面中刪除");
  }

  render() {
    return (
      
         {this.props.content}
      
    );
  }

}

export default NewComponent;

建立一個(gè)組件NewComponent，然后在CreateComponent組件中引入這個(gè)組件，如下：

import React from "react"
import NewComponent from "./newComponent.js";

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log("construct:頁(yè)面初始化");
    this.state = {
      content:"測(cè)試組件",
      isDelete:false
    }
  }

  componentWillMount () {
    console.log("componentWillMount：頁(yè)面將要渲染")
  }

  componentDidMount () {
    console.log("componentDidMount：頁(yè)面渲染結(jié)束")
  }

  deleteFunc = () => {
    this.setState({
      isDelete:true
    })
  }


    render() {
      console.log("render：頁(yè)面渲染");
      return (
       
         頁(yè)面渲染
         
         {!this.state.isDelete?(
          
         ):(null)}

      


      )
    }

}

export default CreateComponent;

當(dāng)點(diǎn)擊刪除按鈕的時(shí)候，組件NewComponent會(huì)被刪除，在刪除之前會(huì)執(zhí)行componentWillUnmount函數(shù)

輸出結(jié)果：

construct:頁(yè)面初始化
componentWillMount：頁(yè)面將要渲染
render：頁(yè)面渲染
componentDidMount：頁(yè)面渲染結(jié)束
componentWillUnmount:將要從頁(yè)面中刪除

以上幾個(gè)生命周期是我們會(huì)常用到的組件生命周期，組件的生命周期還有更新階段的生命周期，不過(guò)這些比較少用，這里簡(jiǎn)單介紹一下：

shouldComponentUpdate(nextProps, nextState)

通過(guò)這個(gè)方法控制組件是否重新渲染，如果返回false不會(huì)重新渲染，如下

import React from "react"
import NewComponent from "./newComponent.js";

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log("construct:頁(yè)面初始化");
    this.state = {
      content:"測(cè)試組件",
      isDelete:false
    }
  }

  componentWillMount () {
    console.log("componentWillMount：頁(yè)面將要渲染")
  }

  componentDidMount () {
    console.log("componentDidMount：頁(yè)面渲染結(jié)束")
  }

  shouldComponentUpdate(nextProps, nextState){
    if(nextState.isDelete){
      return false;
    }

  }

  deleteFunc = () => {
    this.setState({
      isDelete:true
    })
  }


    render() {
      console.log("render：頁(yè)面渲染");
      return (
       
         頁(yè)面渲染
         
         {!this.state.isDelete?(
          
         ):(null)}

      


      )
    }

}

export default CreateComponent;

此時(shí)點(diǎn)擊刪除按鈕，頁(yè)面沒(méi)有進(jìn)行渲染，那是因?yàn)樵趕houldComponentUpdate中設(shè)置了返回值為false，當(dāng)返回值為false的時(shí)候，頁(yè)面無(wú)法重新渲染。這個(gè)函數(shù)第一個(gè)參數(shù)表示最新的props，第二個(gè)參數(shù)表示最新的state

componentWillReceiveProps(nextProps)

組件從父組件接收到新的 props 之前調(diào)用，函數(shù)的參數(shù)nextProps表示接收到的數(shù)據(jù)

在NewComponent組件中：

import React from "react";

class NewComponent extends React.Component {
  componentWillUnmount() {
    console.log("componentWillUnmount:將要從頁(yè)面中刪除");
  }

  componentWillReceiveProps(nextProps){
    console.log(nextProps);
  }

  render() {
    return (
      
         {this.props.content}
      
    );
  }

}

export default NewComponent;

在組件CreateComponent中：

import React from "react"
import NewComponent from "./newComponent.js";

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log("construct:頁(yè)面初始化");
    this.state = {
      content:"測(cè)試組件",
      isDelete:false
    }
  }

  componentWillMount () {
    console.log("componentWillMount：頁(yè)面將要渲染")
  }

  componentDidMount () {
    console.log("componentDidMount：頁(yè)面渲染結(jié)束")
  }

  changeFunc = () => {
    this.setState({
      content:"文字修改"
    })
  }


    render() {
      console.log("render：頁(yè)面渲染");
      return (
       
         頁(yè)面渲染
         
         {!this.state.isDelete?(
          
         ):(null)}

      


      )
    }

}

export default CreateComponent;

不過(guò)componentWillReceiveProps將在react16.3.0開(kāi)始之后棄用

componentWillUpdate：

組件重新渲染之前調(diào)用這個(gè)方法，將在react16.3.0開(kāi)始之后棄用

componentDidUpdate：

組件重新渲染并且把更改變更到真實(shí)的 DOM 以后調(diào)用

注意： componentWillUpdate、componentWillReceiveProps、componentWillMount這三個(gè)生命周期將在react116.3.0之后開(kāi)始棄用，具體詳情可查看官網(wǎng)：https://reactjs.org/docs/reac...

云服務(wù)器 GPU云服務(wù)器 docker初識(shí) 初識(shí)關(guān)系數(shù)據(jù)庫(kù) react _React

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/108474.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

FullStackDeveloper

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

虛擬主機(jī)用用什么管理平臺(tái)-虛擬主機(jī)管理系統(tǒng)有什么用？

閱讀 1175·2021-09-22 16:04
純CSS實(shí)現(xiàn)垂直居中的幾種方法

閱讀 1553·2019-08-30 15:43
CSS簡(jiǎn)潔筆記

閱讀 1181·2019-08-29 14:01
初識(shí)React(3)：組件

閱讀 3495·2019-08-26 12:19
【JavaScript】Promise

閱讀 3412·2019-08-26 12:15
JS面試?yán)碚擃}

閱讀 1499·2019-08-26 12:13
瀏覽器渲染機(jī)制

閱讀 3323·2019-08-23 17:00
每日 30 秒 ? 數(shù)組所有數(shù)據(jù)是否滿足某條件

閱讀 1554·2019-08-23 15:38

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

初識(shí)React(3)：組件

標(biāo)題

constructor組件初始化：

componentWillMount組件渲染之前：

componentDidMount組件渲染之后：

render組件渲染：

componentWillUnmount組件刪除

shouldComponentUpdate(nextProps, nextState)

componentWillReceiveProps(nextProps)

componentWillUpdate：

componentDidUpdate：

相關(guān)文章

***React系列---React（一）初識(shí)React***

***react開(kāi)發(fā)教程（－）初識(shí)***

初識(shí)React(8)：父子組件傳參