成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

如何編寫一個(gè)React組件

sPeng / 2958人閱讀

摘要：例如下面的代碼組件生命周期鉤子函數(shù)在組件掛載完成后立即被調(diào)用組件掛載完成渲染結(jié)果以上就是一個(gè)常規(guī)的組件編寫方式，不過我們還可以通過觀察上面的代碼，發(fā)現(xiàn)幾個(gè)有趣的地方中有一個(gè)函數(shù)是組件生命周期鉤子函數(shù)。

如何編寫一個(gè)React組件

在React的世界里，通常是用class來聲明一個(gè)組件的，它必須繼承自React.Component。
例如下面的代碼：

// MyFirstComponent.jsx
class MyFirstComponent extends React.Component {
  state = {
    text: "Hello React"
  };

  /** 組件生命周期鉤子函數(shù)：在組件掛載完成后立即被調(diào)用 */
  componentDidMount() {
    alert("組件掛載完成！");
  }

  render() {
    return (
      
{this.state.text}, I am {this.props.author}!

    )
  }
}

export default MyFirstComponent;
// index.js
import MyFirstComponent from "MyFirstComponent";

/** 渲染結(jié)果：
Hello React, I am Shaye!
 */
ReactDOM.render(, document.getElementById("app"));

以上就是一個(gè)常規(guī)的React組件編寫方式，不過我們還可以通過觀察上面的代碼，發(fā)現(xiàn)幾個(gè)有趣的地方：

MyFirstComponent中有一個(gè)函數(shù)componentDidMount是組件生命周期鉤子函數(shù)。實(shí)際上React為組件設(shè)計(jì)了一系列的生命周期鉤子函數(shù)

MyFirstComponent中有一個(gè)特別的函數(shù)render()，這個(gè)函數(shù)把類似html的模板內(nèi)容jsx作為返回值。這是一個(gè)必須定義的函數(shù)，否則React將拋出錯(cuò)誤

jsx乍看之下像是一種模板引擎，實(shí)際上是一種JavaScript的語法擴(kuò)展，它的核心理念就是著名的all in js，它完全是在JavaScript內(nèi)部實(shí)現(xiàn)的，它和傳統(tǒng)的模板引擎一樣，也可以綁定js表達(dá)式

jsx綁定的數(shù)據(jù)可以很明顯地看出來自兩個(gè)對(duì)象：this.state和this.props；this.state是MyFirstComponent內(nèi)部自定義的組件狀態(tài)；this.props是外部憑借標(biāo)簽屬性的形式傳進(jìn)MyFirstComponent內(nèi)部的數(shù)據(jù)，類似于函數(shù)的傳參；

總結(jié)來說，當(dāng)你掌握了???組件生命周期???JSX???組件狀態(tài)state???組件屬性props???，你就知道該如何編寫React組件了。

組件生命周期

官方文檔已經(jīng)有非常詳盡的介紹，這里不再贅述，請(qǐng)點(diǎn)擊這里查看組件生命周期的官方文檔。

JSX

你可以任意地在JSX當(dāng)中使用javaScript表達(dá)式，在JSX當(dāng)中的表達(dá)式要包含在大括號(hào)里。
例如下面的代碼：

{this.state.content} forever

JSX里的React元素，比如div，最終都會(huì)被編譯器轉(zhuǎn)譯，被某些特定函數(shù)處理變成一個(gè)輕量的javascript object。比如上面提到的元素div最終會(huì)變成如下的object：

// 注意: 以下示例是簡(jiǎn)化過的（不代表在 React 源碼中是這樣）
const divElement = {
  type: "div",
  props: {
    // this.state.clname的值
    className: "love",
    style: {
      fontSize: "20px"
    },
    // "you"為this.state.content的值
    children: ["you", "forever"]
  }
}

React就是通過讀取這些對(duì)象來操作DOM并保持?jǐn)?shù)據(jù)內(nèi)容一致。所以，實(shí)際上你依然在寫js。所以，class和style必須使用在js中的寫法
比如:class => className
再比如：font-size: 20px; => { fontSize: "20px" }

特別地，React元素的屬性仍然可以像原生html一樣使用引號(hào)來定義以字符串為值的屬性，例如：className="my-claname"

除了以上所提，JSX的事件綁定與原生html也有一些語法上的不同：

React的事件命名采用駝峰式寫法，而不是小寫。

React事件綁定的必須是一個(gè)函數(shù)對(duì)象，不能是字符串。

代碼示例：

我是一個(gè)按鈕


// 也可以向事件回調(diào)函數(shù)傳遞參數(shù)

 this.handleClick(params)}>我是一個(gè)按鈕
組件狀態(tài)state

state是私有的，完全受控于當(dāng)前組件。既然是狀態(tài)，那么就會(huì)有更新的需求，如何更新呢？
代碼示例：

// 對(duì)`this.state`或者它的屬性直接`=`賦值，將永遠(yuǎn)不會(huì)觸發(fā)組件渲染，必須使用`setState()`

// 在組件的生命周期鉤子函數(shù)中調(diào)用this.setState()
componentDidMount() {
  this.setState({
    content: "lalalala"
  })
}

// 在組件的自定義函數(shù)中調(diào)用this.setState()
handleClick = () => {
  this.setState({
    content: "uauauaua"
  })
}

setState()是React中唯一一個(gè)動(dòng)態(tài)更新組件的途徑，當(dāng)它被調(diào)用之后，自身組件以它的所有子組件都將觸發(fā)重渲染
特別地，state同樣也可以作為屬性傳遞給子組件；
setState()詳細(xì)文檔

組件屬性props

props是父組件傳遞下來的數(shù)據(jù)，一般是來自父組件的state或者組件的其他成員變量。并且，props是只讀的，組件永遠(yuǎn)無法修改自己的props。只有在父組件調(diào)用setState()之后才能使子組件的屬性發(fā)生變化并重新渲染。
props只能從上往下傳，組件也只能修改自身私有的state，意味著整個(gè)應(yīng)用的數(shù)據(jù)流只能是自上往下的單向數(shù)據(jù)流

總結(jié)

???組件生命周期???JSX???組件狀態(tài)state???組件屬性props??? 再加上一個(gè)自上而下的單向數(shù)據(jù)流，這些便是React組件最基本的特點(diǎn)了吧！

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

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

相關(guān)文章

  • React組件編寫思路（一）

    摘要：受控組件例假設(shè)有一個(gè)方法非受控組件例接下來我們來看下如果編寫這兩種組件，打個(gè)比方我們要自定義一個(gè)組件。于是修改后的代碼如下確定使用這個(gè)組件的代碼以上就是兩種組件的編寫思路，你可以選擇把你的組件編寫成任意一種，那么使用者使用時(shí)也會(huì)有所不同。 新手寫 React 組件往往無從入手，怎么寫，什么時(shí)候用 props，什么時(shí)候用 state 摸不著頭腦。其實(shí)是沒有了解到 React 的一些思想。...

    CollinPeng 評(píng)論0 收藏0

  • 可靠React組件設(shè)計(jì)的7個(gè)準(zhǔn)則之組合和復(fù)用

    摘要：幸運(yùn)的是，組合易于理解。組件的組合是自然而然的。高效用戶界面可組合的層次結(jié)構(gòu)，因此，組件的組合是一種構(gòu)建用戶界面的有效的方式。這個(gè)原則建議避免重復(fù)。只有一個(gè)組件符合單一責(zé)任原則并且具有合理的封裝時(shí)，它是可復(fù)用的。 翻譯：劉小夕原文鏈接：https://dmitripavlutin.com/7-... 原文的篇幅非常長(zhǎng)，不過內(nèi)容太過于吸引我，還是忍不住要翻譯出來。此篇文章對(duì)編寫可重用和...

    Amos 評(píng)論0 收藏0

  • JavaScript 是如何工作的：編寫自己的 Web 開發(fā)框架 + React 及其虛擬 DOM

    摘要：與大多數(shù)全局對(duì)象不同，沒有構(gòu)造函數(shù)。為什么要設(shè)計(jì)更加有用的返回值早期寫法寫法函數(shù)式操作早期寫法寫法可變參數(shù)形式的構(gòu)造函數(shù)一般寫法寫法當(dāng)然還有很多，大家可以自行到上查看什么是代理設(shè)計(jì)模式代理模式，為其他對(duì)象提供一種代理以控制對(duì)這個(gè)對(duì)象的訪問。 這是專門探索 JavaScript 及其所構(gòu)建的組件的系列文章的第 19 篇。 如果你錯(cuò)過了前面的章節(jié)，可以在這里找到它們： 想閱讀更多優(yōu)質(zhì)文章請(qǐng)...

    余學(xué)文 評(píng)論0 收藏0

  • 【全棧React】第1天: 什么是 React?

    摘要：本文轉(zhuǎn)載自眾成翻譯譯者鏈接原文今天，我們從一開始就開始。讓我們看看是什么，是什么讓運(yùn)轉(zhuǎn)起來。什么是是一個(gè)用于構(gòu)建用戶界面的庫(kù)。它是應(yīng)用程序的視圖層。所有應(yīng)用程序的核心是組件。組件是可組合的。虛擬完全存在于內(nèi)存中，并且是網(wǎng)絡(luò)瀏覽器的的表示。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3765原文：https://www.ful...

    ralap 評(píng)論0 收藏0

  • React Hooks入門

    摘要：組件的職責(zé)增長(zhǎng)并變得不可分割。是架構(gòu)的重要組成部分。有許多好處，但它們?yōu)槌鯇W(xué)者創(chuàng)造了入門的障礙。方法使用狀態(tài)鉤子的最好方法是對(duì)其進(jìn)行解構(gòu)并設(shè)置原始值。第一個(gè)參數(shù)將用于存儲(chǔ)狀態(tài)，第二個(gè)參數(shù)用于更新狀態(tài)。 學(xué)習(xí)目標(biāo) 在本文結(jié)束時(shí)，您將能夠回答以下問題： 什么是 hooks? 如何使用hooks？ 使用hooks的一些規(guī)則? 什么是custom hook(自定義鉤子)？ 什么時(shí)候應(yīng)該使用 ...

    zhangke3016 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<