2. 程式人生 > >初識React(3)：元件

初識React(3)：元件

阿新 • • 發佈：2018-11-21

建立元件

建立元件之前要注意以下幾點：
1. 元件建立的名稱首字母得大寫
2. 元件中返回的JSX只能是一個根節點，所有的內容得用一個元素都框起來

1.無狀態函式式元件

無狀態函式式元件可以理解成就是一個函式生成的，使得程式碼的可讀性更好，並且精簡、便利，減少了冗餘，無狀態元件有以下特點：
1. 元件無法被例項化，整體渲染提高
2. 元件不能訪問this物件，因為沒有例項化，所以無法訪問到this物件
3. 元件沒有生命週期
4. 無狀態元件只能訪問輸入的props，沒有state狀態

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

 function CreateComponent(props) {
   console.log(props);
   return (
     <div>
        <span>{props.name}今年{props.age}歲</span>
     </div>
   )
 }

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(
         <div>
           <h2>標題</h2>
            <ul>
              <li>首先</li>
              <li>其次</li>
              <li>最後</li>
            </ul>
         </div
 
>
       )
     }
}

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 (
       <div>
         <a onClick={this.clickFunc}>監聽事件</a>
         <br/>
         <a onClick={this.clickValue.bind(this,123)}>this物件</a>
      </div>
      )
    }

}

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 (
       <div>
         <span>flag的值為：{this.state.flag ? '真' : '假'}</span>
         <br/>
         <button onClick={this.clickValue}>改變flag值</button>
      </div>
      )
    }

}

export default CreateComponent;

3.元件的props

props是元件裡面的屬性，在元件內部是不能更改自己本身的props的，比如，建立一個元件，然後在另外一個元件裡面呼叫這個元件，如下：

import React from 'react';

function NewComponent(props) {
  return (
    <div>
       {props.content}
    </div>
  );
}


export default NewComponent;

建立一個元件NewComponent,然後呼叫，如下：

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

class CreateComponent extends React.Component {
    render() {
      return (
       <div>
         <NewComponent content={'我是內容'} />
      </div>
      )
    }

}

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 (
       <div>
         頁面渲染
      </div>


      )
    }

}

export default CreateComponent;

輸出結果：

construct:頁面初始化
componentWillMount：頁面將要渲染
render：頁面渲染
componentDidMount：頁面渲染結束
componentWillUnmount元件刪除

componentWillUnmount函式是在元件要刪除之前執行的函式，如下程式碼：

import React from 'react';

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

  render() {
    return (
      <div>
         {this.props.content}
      </div>
    );
  }

}

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 (
       <div>
         頁面渲染
         <input type="button" value='刪除' onClick={this.deleteFunc}/>
         {!this.state.isDelete?(
          <NewComponent content={this.state.content}/>
         ):(null)}

      </div>


      )
    }

}

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 (
       <div>
         頁面渲染
         <input type="button" value='刪除' onClick={this.deleteFunc}/>
         {!this.state.isDelete?(
          <NewComponent content={this.state.content}/>
         ):(null)}

      </div>


      )
    }

}

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 (
      <div>
         {this.props.content}
      </div>
    );
  }

}

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 (
       <div>
         頁面渲染
         <input type="button" value='修改content' onClick={this.changeFunc}/>
         {!this.state.isDelete?(
          <NewComponent content={this.state.content}/>
         ):(null)}

      </div>


      )
    }

}

export default CreateComponent;

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

componentWillUpdate：

元件重新渲染之前呼叫這個方法，將在react16.3.0開始之後棄用

componentDidUpdate：

元件重新渲染並且把更改變更到真實的 DOM 以後呼叫

注意： componentWillUpdate、componentWillReceiveProps、componentWillMount這三個生命週期將在react16.3.0之後開始棄用，具體詳情可檢視官網：https://reactjs.org/docs/react-component.html#unsafe_componentwillmount

相關推薦

初識React(3)：元件

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

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

父級向子級傳參 父子元件通訊主要用到props，如下： 在父元件中： import React from 'react' import ChildCom from './childCom.js' class ParentCom extends React.Component

初識React(7)：高階元件

什麼是高階元件 高階元件，聽著好像很高大尚，但是其實高階元件就是一個函式的引數是元件，返回的是一個新的元件。那麼，高階元件有什麼好處呢，高階元件可以減少程式碼冗餘，把共有的程式碼提取出來，下面有個例子說明下： import React from 'react' function

react思考：元件 元件工廠 元件樹 動態生成/替換節點 資料流

元件和元件工廠 1元件是根據傳入的props變數來執行業務邏輯和檢視邏輯， 2元件工廠則是產生了很多個不同的這樣的元件 元件樹和資料流、資料波浪 元件連線起來，就成了一顆元件樹， 資料就在連線起來的元件中從根部流向分支末梢， 資料流是一波一波的，每次樹的根本，store中的

初識React(6)：propTypes型別檢測

propTypes是react中用來對引數進行型別檢測的，當然要使用這個外掛，得先安裝這個外掛，如下： npm install prop-types --save 但是如果你是直接用dva建立的專案，無需安裝，直接引入即可，如下： import React from 're

初識React(5)：dangerouslySetInnerHTML屬性

dangerouslySetInnerHTML屬性的功能實際上就是顯示純文字內容 import React from 'react'; class SetHtml extends React.Component { constructor(){ super();

初識React(4)：ref屬性

ref屬性其實就是為了獲取DOM節點，例如： import React from 'react' class RefComponent extends React.Component { componentDidMount(){ this.inputNode.focu

初識React(2)：什麼是JSX？

前言 在react中，我們的頁面內容就是通過JSX來編寫，那麼JSX到底是什麼呢？JSX其實就是JavaScript物件，會構建建立一個js物件來描述HTML結構的資訊。這裡要記住JSX是js的一種擴充套件語言，類似HTML但是又不是HTML，因為JSX中還能進行運算，判斷，加入一些

初識React(1)：dva+antd建立react專案

用dva建立專案，首先要全域性安裝dva-cli cnpm install dva-cli -g 建立一個專案 dva new 專案檔名稱 專案建立完畢，進入專案目錄下，安裝ant-design這個ui框架 cnpm install antd --save 在專案

React學習：元件生命週期、元件間資料傳遞

注：本篇文章僅供個人日後複習，所以沒什麼乾貨，只起類似“備忘錄”的作用。最近，在看《深入淺出React和Redux》，目前到第二章了，這是本章程式碼：（1）counter.jsimport React, { Component } from 'react'; import P

React原始碼解析（3）：元件的生命週期

元件的生命週期分為二個部分 元件的掛載 元件的更新 元件的掛載 在上一章對於元件的掛載已經做了詳細的說明，但是涉及到元件生命週期部分被略過.接下來我將詳細的對其說明. 元件的掛載涉及到二個比較重要的生命週期方法componentWillMount和componentDidMount. c

react 入門-建立元件（3）工廠方法

例項 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Factories</title> </head> <

React原始碼解析（2）：元件的掛載

上一章jsx語法是如何解析的講到了 <div> <div>1</div> <div>2</div> <div>3</div> </div> 複製程式碼 jsx語法是如何解析為虛擬dom的,

react 初探：類元件、狀態和生命週期

react 除了提供函式式元件外，還提供了類元件，類元件提供了狀態屬性，下面一起吧之前的函式元件轉換成類元件。 /* 類元件定義 */ class Clock extends React.Component{ render(){ return (

react 初探：react元件和屬性

react 的設計方式採用了元件化的方式，將UI 分割成一個個元件便於更好的實現和重複利用。 元件分為函式式元件和類元件，函式式元件主要用來做為頁面渲染使用（僅僅作為頁面渲染，不附帶其他初始化功能） 函式式元件 function Welcome(props) {

React實現全域性元件：Toast輕提示

Toast是常用的輕提示彈框，常用於頁面loading和提示語彈窗。本例基於React實現一個隨時可呼叫且不隨頁面渲染的全域性元件。 如何使用 首先引入 import Toast from './components/toast' JSX中事件呼叫： <bu

Cesium應用篇：3控制元件（4）Geocoder

Geocoder是一個非常簡單的控制元件，但也是非常常用且實用的控制元件，顧名思義，Geocoder就是地理編碼的意思，而平常我們經常會查詢一些地物，也就是常用的POI搜尋，就是Geocoder的功勞。 首先，該控制元件支援經緯度定位，比如如下，是北京京洲世家小

React 深入系列2：元件分類

React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在專案中更加靈活地使用React。 React 元件有很多種分類方式，常見的分類方式有函式元件和類元件，無狀態元件和有狀態元件，展示型元件和容

React筆記：組件（3）

復用 模塊 數組 one .com ren reac component 定義 1. 組件定義 　　組件是React的核心概念，組件將應用的UI拆分成獨立的、可復用的模塊。 　　定義組件的兩種方式： 　　（1）類組件：使用ES6 class 　　（2）函數組件：使用

實驗3：Android元件通訊

程式設計實現： （1）功能描述： 主介面上有一個“登入”按鈕，點選“登入”按鈕後開啟一個新的Activity 新的Activity上面有輸入使用者名稱和密碼的控制元件，在使用者關閉這個Activity後，將使用者輸入的使用者名稱和密碼傳遞到主介面中