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

資訊專欄INFORMATION COLUMN

React中state和props分別是什么？

yedf / 3052人閱讀

摘要：整理一下中關(guān)于和的知識點。在任何應(yīng)用中，數(shù)據(jù)都是必不可少的。比如，這樣關(guān)于，可以聲明為以下幾種類型注意，和是簡寫。是什么呢一個組件的顯示形態(tài)可以由數(shù)據(jù)狀態(tài)和外部參數(shù)所決定，外部參數(shù)也就是，而數(shù)據(jù)狀態(tài)就是。

整理一下React中關(guān)于state和props的知識點。

在任何應(yīng)用中，數(shù)據(jù)都是必不可少的。我們需要直接的改變頁面上一塊的區(qū)域來使得視圖的刷新，或者間接地改變其他地方的數(shù)據(jù)。React的數(shù)據(jù)是自頂向下單向流動的，即從父組件到子組件中，組件的數(shù)據(jù)存儲在props和state中，這兩個屬性有啥子區(qū)別呢？

props

React的核心思想就是組件化思想，頁面會被切分成一些獨立的、可復(fù)用的組件。

組件從概念上看就是一個函數(shù)，可以接受一個參數(shù)作為輸入值，這個參數(shù)就是props，所以可以把props理解為從外部傳入組件內(nèi)部的數(shù)據(jù)。由于React是單向數(shù)據(jù)流，所以props基本上也就是從服父級組件向子組件傳遞的數(shù)據(jù)。

用法

假設(shè)我們現(xiàn)在需要實現(xiàn)一個列表，根據(jù)React組件化思想，我們可以把列表中的行當(dāng)做一個組件，也就是有這樣兩個組件：和。

先看看

import Item from "./item";
export default class ItemList extends React.Component{
  const itemList = data.map(item => );
  render(){
    return (
      {itemList}
    )
  }
}

列表的數(shù)據(jù)我們就暫時先假設(shè)是放在一個data變量中，然后通過map函數(shù)返回一個每一項都是的數(shù)組，也就是說這里其實包含了data.length個組件，數(shù)據(jù)通過在組件上自定義一個參數(shù)傳遞。當(dāng)然，這里想傳遞幾個自定義參數(shù)都可以。

在中是這樣的：

export default class Item extends React.Component{
  render(){
    return (
      
  • {this.props.item}
    • 
    )
  }
}

    在render函數(shù)中可以看出，組件內(nèi)部是使用this.props來獲取傳遞到該組件的所有數(shù)據(jù)，它是一個對象，包含了所有你對這個組件的配置，現(xiàn)在只包含了一個item屬性，所以通過this.props.item來獲取即可。

    只讀性

    props經(jīng)常被用作渲染組件和初始化狀態(tài)，當(dāng)一個組件被實例化之后，它的props是只讀的，不可改變的。如果props在渲染過程中可以被改變，會導(dǎo)致這個組件顯示的形態(tài)變得不可預(yù)測。只有通過父組件重新渲染的方式才可以把新的props傳入組件中。

    默認參數(shù)

    在組件中，我們最好為props中的參數(shù)設(shè)置一個defaultProps，并且制定它的類型。比如，這樣：

    Item.defaultProps = {
  item: "Hello Props",
};

Item.propTypes = {
  item: PropTypes.string,
};

    關(guān)于propTypes，可以聲明為以下幾種類型：

    optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,

    注意，bool和func是簡寫。

    這些知識基礎(chǔ)數(shù)據(jù)類型，還有一些復(fù)雜的，附上鏈接：

    https://facebook.github.io/react/docs/typechecking-with-proptypes.html

    總結(jié)

    props是一個從外部傳進組件的參數(shù)，主要作為就是從父組件向子組件傳遞數(shù)據(jù)，它具有可讀性和不變性，只能通過外部組件主動傳入新的props來重新渲染子組件，否則子組件的props以及展現(xiàn)形式不會改變。

    state

    state是什么呢？

    State is similar to props, but it is private and fully controlled by the component.

    一個組件的顯示形態(tài)可以由數(shù)據(jù)狀態(tài)和外部參數(shù)所決定，外部參數(shù)也就是props，而數(shù)據(jù)狀態(tài)就是state。

    用法 
    export default class ItemList extends React.Component{
  constructor(){
    super();
    this.state = {
      itemList:"一些數(shù)據(jù)",
    }
  }
  render(){
    return (
      {this.state.itemList}
    )
  }
}

    首先，在組件初始化的時候，通過this.state給組件設(shè)定一個初始的state，在第一次render的時候就會用這個數(shù)據(jù)來渲染組件。

    setState

    state不同于props的一點是，state是可以被改變的。不過，不可以直接通過this.state=的方式來修改，而需要通過this.setState()方法來修改state。

    比如，我們經(jīng)常會通過異步操作來獲取數(shù)據(jù)，我們需要在didMount階段來執(zhí)行異步操作：

    componentDidMount(){
  fetch("url")
    .then(response => response.json())
    .then((data) => {
      this.setState({itemList:item});  
    }
}

    當(dāng)數(shù)據(jù)獲取完成后，通過this.setState來修改數(shù)據(jù)狀態(tài)。

    當(dāng)我們調(diào)用this.setState方法時，React會更新組件的數(shù)據(jù)狀態(tài)state，并且重新調(diào)用render方法，也就是會對組件進行重新渲染。

    注意：通過this.state=來初始化state，使用this.setState來修改state，constructor是唯一能夠初始化的地方。

    setState接受一個對象或者函數(shù)作為第一個參數(shù)，只需要傳入需要更新的部分即可，不需要傳入整個對象，比如：

    export default class ItemList extends React.Component{
  constructor(){
    super();
    this.state = {
      name:"axuebin",
      age:25,
    }
  }
  componentDidMount(){
    this.setState({age:18})  
  }
}

    在執(zhí)行完setState之后的state應(yīng)該是{name:"axuebin",age:18}。

    setState還可以接受第二個參數(shù)，它是一個函數(shù)，會在setState調(diào)用完成并且組件開始重新渲染時被調(diào)用，可以用來監(jiān)聽渲染是否完成：

    this.setState({
  name:"xb"
},()=>console.log("setState finished"))
    總結(jié)

    state的主要作用是用于組件保存、控制以及修改自己的狀態(tài)，它只能在constructor中初始化，它算是組件的私有屬性，不可通過外部訪問和修改，只能通過組件內(nèi)部的this.setState來修改，修改state屬性會導(dǎo)致組件的重新渲染。

    區(qū)別

    state是組件自己管理數(shù)據(jù)，控制自己的狀態(tài)，可變；

    props是外部傳入的數(shù)據(jù)參數(shù)，不可變；

    沒有state的叫做無狀態(tài)組件，有state的叫做有狀態(tài)組件；

    多用props，少用state。也就是多寫無狀態(tài)組件。

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

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

    相關(guān)文章

    • [React技術(shù)內(nèi)幕] key帶來了什么

      摘要：啟發(fā)式算法了解一下什么是啟發(fā)式算法啟發(fā)式算法指人在解決問題時所采取的一種根據(jù)經(jīng)驗規(guī)則進行發(fā)現(xiàn)的方法。這將會造成極大的性能損失和組件內(nèi)的丟失。但這都是的內(nèi)部實現(xiàn)方式，可能在后序的版本中不斷細化啟發(fā)式算法，甚至采用別的啟發(fā)式算法。 　　首先歡迎大家關(guān)注我的掘金賬號和Github博客，也算是對我的一點鼓勵，畢竟寫東西沒法獲得變現(xiàn)，能堅持下去也是靠的是自己的熱情和大家的鼓勵。 　　大家在使用R...

      cnTomato 評論0 收藏0

    • 談一談創(chuàng)建React Component的幾種方式

      摘要：用這種方式創(chuàng)建組件時，并沒有對內(nèi)部的函數(shù)，進行綁定，所以如果你想讓函數(shù)在回調(diào)中保持正確的，就要手動對需要的函數(shù)進行綁定，如上面的，在構(gòu)造函數(shù)中對進行了綁定。 當(dāng)我們談起React的時候，多半會將注意力集中在組件之上，思考如何將頁面劃分成一個個組件，以及如何編寫可復(fù)用的組件。但對于接觸React不久，還沒有真正用它做一個完整項目的人來說，理解如何創(chuàng)建一個組件也并不那么簡單。在最開始的時候...

      mylxsw 評論0 收藏0

    • 用好React，你必須要知道的事情

      摘要：屬性如何獲取，是容器性組件負責(zé)的事情。所以，不要依賴和的值計算下一個狀態(tài)。也可以使用帶用回調(diào)函數(shù)參數(shù)版本的，回調(diào)函數(shù)中的會保證是最新的。當(dāng)返回時，組件本次的方法不會被觸發(fā)。 容器性組件（container component）和展示性組件（presentational component） 使用React編寫組件時，我們需要有意識地將組件劃分為容器性組件（container compo...

      vvpvvp 評論0 收藏0

    • React 實踐心得：react-redux 之 connect 方法詳解

      摘要：但這并不是最佳的方式。最佳的方式是使用提供的和方法。也就是說，與的與完全無關(guān)。另外，如果使用對做屬性類型檢查，方法和方法為添加的屬性是存在的。注意，的變化不會引起上述過程，默認在組件的生命周期中是固定的。 轉(zhuǎn)載注： 本文作者是淘寶前端團隊的葉齋。筆者非常喜歡這篇文章，故重新排版并轉(zhuǎn)載到這里，同時也加入了一些自己的體會。 原文地址：http://taobaofed.org/blog/...

      張春雷 評論0 收藏0

    • React loves you —“洞悉Redux裝的逼”

      摘要：就是那個將要全權(quán)代管你所有組件的那家伙用的自述來說就是是狀態(tài)容器，提供可預(yù)測化的狀態(tài)管理。 你若裝逼，請帶我飛！ I love React ! 從前，從前，聽說React只負責(zé)UI，話說寫Angular代碼就像寫后端，現(xiàn)在看來，React贏在情懷上了； 我認為沒必要老是拿React和Angular做比較，Angular是一套大而全的相對完備的框架；而React確實是只負責(zé)UI，只是多出...

      chaos_G 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <