初識React(3)：組件

FullStackDeveloper 發布于2019-08-26 12:19 / 3447人閱讀

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

創建組件

創建組件之前要注意以下幾點：

組件創建的名稱首字母得大寫

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

1.無狀態函數式組件

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

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

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

組件沒有生命周期

無狀態組件只能訪問輸入的props，沒有state狀態

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類組件

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

import React from "react"

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

export default CreateComponent;

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

1.組件的事件監聽

import React from "react"

class CreateComponent extends React.Component {

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

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

         this對象
      
      )
    }

}

export default CreateComponent;

以上就是事件監聽和傳參實例

2.組件的state和setState

通常在組件中，state是用來放這個組件內部參數的狀態的，而setState是用來改變state里面的參數，例如：

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是組件里面的屬性，在組件內部是不能更改自己本身的props的，比如，建立一個組件，然后在另外一個組件里面調用這個組件，如下：

import React from "react";

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


export default NewComponent;

建立一個組件NewComponent,然后調用，如下：

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

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

}

export default CreateComponent;

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

4.組件的生命周期

constructor組件初始化：

constructor初始化一些參數屬性等等

componentWillMount組件渲染之前：

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

componentDidMount組件渲染之后：

componentDidMount在組件渲染之后實行，可以加載數據

render組件渲染：

render組件渲染顯示頁面

import React from "react"

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

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

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


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


      )
    }

}

export default CreateComponent;

輸出結果：

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

componentWillUnmount組件刪除

componentWillUnmount函數是在組件要刪除之前執行的函數，如下代碼：

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：頁面渲染結束")
  }

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


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

      


      )
    }

}

export default CreateComponent;

當點擊刪除按鈕的時候，組件NewComponent會被刪除，在刪除之前會執行componentWillUnmount函數

輸出結果：

construct:頁面初始化
componentWillMount：頁面將要渲染
render：頁面渲染
componentDidMount：頁面渲染結束
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：頁面渲染結束")
  }

  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;

此時點擊刪除按鈕，頁面沒有進行渲染，那是因為在shouldComponentUpdate中設置了返回值為false，當返回值為false的時候，頁面無法重新渲染。這個函數第一個參數表示最新的props，第二個參數表示最新的state

componentWillReceiveProps(nextProps)

組件從父組件接收到新的 props 之前調用，函數的參數nextProps表示接收到的數據

在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：頁面渲染結束")
  }

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


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

      


      )
    }

}

export default CreateComponent;

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

componentWillUpdate：

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

componentDidUpdate：

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

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

GPU云服務器云服務器 docker初識初識關系數據庫 react _React

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108474.html

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

摘要：系列一初識系列二組件的和系列三組件的生命周期是推出的一個庫，它的口號就是用來創建用戶界面的庫，所以它只是和用戶界面打交道，可以把它看成中的視圖層。系列一初識系列二組件的和系列三組件的生命周期 React系列---React（一）初識ReactReact系列---React（二）組件的prop和stateReact系列---React（三）組件的生命周期 showImg(https://...

lanffy 2019-08-20 17:27 評論0 收藏0
react開發教程（－）初識

摘要：定義一個組件可以在其他組件中調用這個組件調用組件劉宇組件插入內容在上面的案例中可以看到吧寫到當中，這種寫法稱為。 React初識 React是Facebook推出的一個javascript庫(用來創建用戶界面的Javascript庫)，所以他只是和用戶的界面打交道，你可以把它看成MVC中的V(視圖)這一層。組件 React的一切都是基于組件的。web世界的構成是基于各種HTML標簽的...

Allen 2019-08-21 15:36 評論0 收藏0
初識React(8)：父子組件傳參

摘要：父級向子級傳參父子組件通信主要用到，如下在父組件中父組件我是父級過來的內容在子組件中子組件通過上面例子可以看出，在父組件中，我們引入子組件，通過給子組件添加屬性，來起到傳參的作用，子組件可以通過獲取父組件傳過來的參數子級向父級傳參在父組件中父級向子級傳參父子組件通信主要用到props，如下：在父組件中： import React from react import ChildCo...

paulli3 2019-08-23 11:48 評論0 收藏0
初識React

摘要：初識依稀記得那年參加線下活動，第一次聽說這個詞語，當時的主講人是郭達峰，他播放了一個關于及的性能對比視頻。合成事件會以事件委托的方式綁定到組件最上層，并且在組件卸載的時候自動銷毀綁定的事件。初識React 依稀記得2015那年參加線下活動，第一次聽說React這個詞語，當時的主講人是郭達峰，他播放了一個關于ember、angular及react的性能對比視頻： React.js Co...

kuangcaibao 2019-08-21 14:47 評論0 收藏0

發表評論

登陸后可評論

0條評論

FullStackDeveloper

男|高級講師

我要關注我要私信

TA的文章

虛擬主機用用什么管理平臺-虛擬主機管理系統有什么用？

閱讀 1127·2021-09-22 16:04
純CSS實現垂直居中的幾種方法

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

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

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

閱讀 3365·2019-08-26 12:15
JS面試理論題

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

閱讀 3274·2019-08-23 17:00
每日 30 秒 ? 數組所有數據是否滿足某條件

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

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

資訊專欄INFORMATION COLUMN

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

初識React(3)：組件

標題

constructor組件初始化：

componentWillMount組件渲染之前：

componentDidMount組件渲染之后：

render組件渲染：

componentWillUnmount組件刪除

shouldComponentUpdate(nextProps, nextState)

componentWillReceiveProps(nextProps)

componentWillUpdate：

componentDidUpdate：

相關文章

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

react開發教程（－）初識

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

初識React

發表評論

0條評論

FullStackDeveloper

男|高級講師

TA的文章

虛擬主機用用什么管理平臺-虛擬主機管理系統有什么用？

純CSS實現垂直居中的幾種方法

CSS簡潔筆記

初識React(3)：組件

【JavaScript】Promise

JS面試理論題

瀏覽器渲染機制

每日 30 秒 ? 數組所有數據是否滿足某條件

最新活動