初識React(3)：組件

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

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

創(chuàng)建組件

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

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

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

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

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

組件無法被實例化，整體渲染提高

組件不能訪問this對象，因為沒有實例化，所以無法訪問到this對象

組件沒有生命周期

無狀態(tài)組件只能訪問輸入的props，沒有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類組件

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

import React from "react"

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

export default CreateComponent;

以上實例，就是把h2元素和ul用一個div都給包起來

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

import React from "react"

class CreateComponent extends React.Component {

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

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

         this對象
      
      )
    }

}

export default CreateComponent;

以上就是事件監(jiān)聽和傳參實例

2.組件的state和setState

通常在組件中，state是用來放這個組件內(nèi)部參數(shù)的狀態(tài)的，而setState是用來改變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的，比如，建立一個組件，然后在另外一個組件里面調(diào)用這個組件，如下：

import React from "react";

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


export default NewComponent;

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

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

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

}

export default CreateComponent;

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

4.組件的生命周期

constructor組件初始化：

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

componentWillMount組件渲染之前：

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

componentDidMount組件渲染之后：

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

render組件渲染：

render組件渲染顯示頁面

import React from "react"

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

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

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


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


      )
    }

}

export default CreateComponent;

輸出結(jié)果：

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

componentWillUnmount組件刪除

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

import React from "react";

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

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

}

export default NewComponent;

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

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

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

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

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

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


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

      


      )
    }

}

export default CreateComponent;

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

輸出結(jié)果：

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

以上幾個生命周期是我們會常用到的組件生命周期，組件的生命周期還有更新階段的生命周期，不過這些比較少用，這里簡單介紹一下：

shouldComponentUpdate(nextProps, nextState)

通過這個方法控制組件是否重新渲染，如果返回false不會重新渲染，如下

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

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

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

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

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

  }

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


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

      


      )
    }

}

export default CreateComponent;

此時點擊刪除按鈕，頁面沒有進(jìn)行渲染，那是因為在shouldComponentUpdate中設(shè)置了返回值為false，當(dāng)返回值為false的時候，頁面無法重新渲染。這個函數(shù)第一個參數(shù)表示最新的props，第二個參數(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:將要從頁面中刪除");
  }

  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:頁面初始化");
    this.state = {
      content:"測試組件",
      isDelete:false
    }
  }

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

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

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


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

      


      )
    }

}

export default CreateComponent;

不過componentWillReceiveProps將在react16.3.0開始之后棄用

componentWillUpdate：

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

componentDidUpdate：

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/108474.html

發(fā)表評論

登陸后可評論

0條評論

FullStackDeveloper

男|高級講師

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

TA的文章

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

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

閱讀 1494·2019-08-30 15:43
CSS簡潔筆記

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

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

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

閱讀 1443·2019-08-26 12:13
瀏覽器渲染機制

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

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

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

初識React(3)：組件

標(biāo)題

constructor組件初始化：

componentWillMount組件渲染之前：

componentDidMount組件渲染之后：

render組件渲染：

componentWillUnmount組件刪除

shouldComponentUpdate(nextProps, nextState)

componentWillReceiveProps(nextProps)

componentWillUpdate：

componentDidUpdate：

相關(guān)文章

***React系列---React（一）初識React***

react開發(fā)教程（－）初識

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

初識React

發(fā)表評論

0條評論

FullStackDeveloper

男|高級講師

TA的文章

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

純CSS實現(xiàn)垂直居中的幾種方法

CSS簡潔筆記

初識React(3)：組件

【JavaScript】Promise

JS面試?yán)碚擃}

瀏覽器渲染機制

每日 30 秒 ? 數(shù)組所有數(shù)據(jù)是否滿足某條件

最新活動