React state與props學(xué)習(xí)筆記

lk20150415 發(fā)布于2019-08-19 18:41 / 339人閱讀

摘要：組件的狀態(tài)與屬性組件本質(zhì)上是狀態(tài)機(jī)，輸入確定，輸出一定確定。這是在事件處理函數(shù)中和請(qǐng)求回調(diào)函數(shù)中觸發(fā)更新的主要方法。

組件的狀態(tài)與屬性

組件本質(zhì)上是狀態(tài)機(jī)，輸入確定，輸出一定確定。組件把狀態(tài)與結(jié)果一一對(duì)應(yīng)起來，組件中有state與prop（狀態(tài)與屬性）。

屬性(props)是由父組件傳遞給子組件的；

狀態(tài)(state)是子組件內(nèi)部維護(hù)的數(shù)據(jù)，當(dāng)狀態(tài)發(fā)生變化的同時(shí)，組件也會(huì)進(jìn)行更新。當(dāng)狀態(tài)發(fā)生轉(zhuǎn)換時(shí)會(huì)觸發(fā)不同的鉤子函數(shù)，從而讓開發(fā)者有機(jī)會(huì)做出相應(yīng)。

props 屬性的用法

鍵值對(duì)：值可以有多種形式：

字符串："XiaoWang";

求值表達(dá)式 {123}、{"XiaoWang"};

數(shù)組{[1,2,3]};

變量{variable};

函數(shù)求值表達(dá)式{function}（不推薦，如果需要函數(shù)可以多帶帶把函數(shù)提取出來然后多帶帶調(diào)用函數(shù)）;

展開語法{...props}：

React會(huì)自動(dòng)把對(duì)象中的屬性和值當(dāng)做屬性的賦值

var HelloWorld =React.createClass({
    rencer:function () {
        return Hello,{this.props.name1 + " "this.props.name2};
    },
});
var HelloUniverse = React.createClass({
    getInitialState:function () {
        return {
            name1:"Tim",
            name2:"John",
        };
    },
    handleChange: function (event) {
        this.setState({name: event.target.value});
    },
    render: function () {
        return 
        
        

        
        
    },
});
ReactDom.render(,document.body);

setProps：

var HelloWorld =React.createClass({
    rencer:function () {
        return Hello,{this.props.name ? this.props.name : "World"};
    },
});
var instance = React.render(,document.body);
instance.setProps({name:"Tim"});

setProps(object nextProps[, function callback])可以設(shè)置組件的屬性。這個(gè)方法已經(jīng)過時(shí)了（與replaceProps等一樣），不久將被刪除。這個(gè)方法不支持ES6類組件React.Component擴(kuò)展。

propTypes

組件的屬性可以接受任意值，字符串、對(duì)象、函數(shù)等等都可以。有時(shí)，我們需要一種機(jī)制，驗(yàn)證別人使用組件時(shí)，提供的參數(shù)是否符合要求。

var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,//這個(gè)title是必須的，而且它的值必須是字符串
  },
  render: function() {
     return  {this.props.title} ;
   }
});

getDefaultProps

getDefaultProps 方法可以用來設(shè)置組件屬性的默認(rèn)值。

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : "Hello World"
    };
  },

  render: function() {
     return  {this.props.title} ;
   }
});
ReactDOM.render(,document.body);

this.props.children

this.props 對(duì)象的屬性與組件的屬性一一對(duì)應(yīng)，但是有一個(gè)例外，就是 this.props.children 屬性。它表示組件的所有子節(jié)點(diǎn)。

state

組件在運(yùn)行時(shí)需要修改的數(shù)據(jù)就是狀態(tài)，this.state 是會(huì)隨著用戶互動(dòng)而產(chǎn)生變化的特性。組件免不了要與用戶互動(dòng)，React 的一大創(chuàng)新，就是將組件看成是一個(gè)狀態(tài)機(jī)，一開始有一個(gè)初始狀態(tài)，然后用戶互動(dòng)，導(dǎo)致狀態(tài)變化，從而觸發(fā)重新渲染 UI。

state工作原理

常用的通知 React 數(shù)據(jù)變化的方法是調(diào)用 setState(data, callback)。這個(gè)方法會(huì)合并（merge） data 到 this.state，并重新渲染組件。渲染完成后，調(diào)用可選的 callback 回調(diào)。大部分情況下不需要提供 callback，因?yàn)?React 會(huì)負(fù)責(zé)把界面更新到最新狀態(tài)。

getInitialState

object getInitialState()
getInitialState 方法用于定義初始狀態(tài)，也就是一個(gè)對(duì)象，這個(gè)對(duì)象可以通過 this.state 屬性讀取。在組件掛載之前調(diào)用一次。返回值將會(huì)作為 this.state 的初始值。

setState

setState(object nextState[, function callback])
合并 nextState 和當(dāng)前 state。這是在事件處理函數(shù)中和請(qǐng)求回調(diào)函數(shù)中觸發(fā) UI 更新的主要方法。另外，也支持可選的回調(diào)函數(shù)，該函數(shù)在 setState 執(zhí)行完畢并且組件重新渲染完成之后調(diào)用。this.setState 方法用于修改狀態(tài)值，每次修改以后，自動(dòng)調(diào)用 this.render 方法，再次渲染組件。

replaceState

replaceState(object nextState[, function callback])
類似于 setState()，但是刪除之前所有已存在的 state 鍵，這些鍵都不在 nextState 中。

哪些組件應(yīng)該有 State？

大部分組件的工作應(yīng)該是從 props 里取數(shù)據(jù)并渲染出來。但是，有時(shí)需要對(duì)用戶輸入、服務(wù)器請(qǐng)求或者時(shí)間變化等作出響應(yīng)，這時(shí)才需要使用 State。

嘗試把盡可能多的組件無狀態(tài)化。這樣做能隔離 state，把它放到最合理的地方，也能減少冗余，同時(shí)易于解釋程序運(yùn)作過程。

常用的模式是創(chuàng)建多個(gè)只負(fù)責(zé)渲染數(shù)據(jù)的無狀態(tài)（stateless）組件，在它們的上層創(chuàng)建一個(gè)有狀態(tài)（stateful）組件并把它的狀態(tài)通過 props 傳給子級(jí)。這個(gè)有狀態(tài)的組件封裝了所有用戶的交互邏輯，而這些無狀態(tài)組件則負(fù)責(zé)聲明式地渲染數(shù)據(jù)。

參考文章

云服務(wù)器 GPU云服務(wù)器學(xué)習(xí)筆記學(xué)習(xí)筆記一基礎(chǔ)學(xué)習(xí)筆記深度學(xué)習(xí)筆記

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

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

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

登陸后可評(píng)論

0條評(píng)論

lk20150415

男|高級(jí)講師

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

TA的文章

#11.11#GigsGigsCloud：香港/日本/美國/新加坡云服務(wù)器買一送一，$18/季起

閱讀 1286·2021-11-15 18:14
CloudCone：控制臺(tái)域名已經(jīng)恢復(fù)正常訪問/附往期閃購便宜VPS整理/$12.95/年起

閱讀 3175·2021-08-25 09:38
構(gòu)建離線WEB應(yīng)用

閱讀 2676·2019-08-30 10:55
小程序中placeholder-class和placeholder-style的區(qū)別

閱讀 2708·2019-08-29 16:39
【基礎(chǔ)】EM 還是 REM？這是一個(gè)問題！

閱讀 1319·2019-08-29 15:07
移動(dòng)端布局（less+rem）

閱讀 2458·2019-08-29 14:14
關(guān)于css命名的一點(diǎn)思考，探討一下css命名空間的可行性

閱讀 826·2019-08-29 12:36
《CSS揭秘》第五章：字體排印

閱讀 925·2019-08-29 11:21

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

資訊專欄INFORMATION COLUMN

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

React state與props學(xué)習(xí)筆記

{this.props.title}

{this.props.title}

相關(guān)文章

**《深入react技術(shù)?！?em>學(xué)習(xí)筆記（二）初入React世界**

React學(xué)習(xí)筆記3：用es2015（ES6）重寫CommentBox

React學(xué)習(xí)筆記—UI交互

react 學(xué)習(xí)筆記

React學(xué)習(xí)筆記—簡(jiǎn)易信息管理，實(shí)現(xiàn)CUD

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

0條評(píng)論

lk20150415

男|高級(jí)講師

TA的文章

#11.11#GigsGigsCloud：香港/日本/美國/新加坡云服務(wù)器買一送一，$18/季起

CloudCone：控制臺(tái)域名已經(jīng)恢復(fù)正常訪問/附往期閃購便宜VPS整理/$12.95/年起

構(gòu)建離線WEB應(yīng)用

小程序中placeholder-class和placeholder-style的區(qū)別

【基礎(chǔ)】EM 還是 REM？這是一個(gè)問題！

移動(dòng)端布局（less+rem）

關(guān)于css命名的一點(diǎn)思考，探討一下css命名空間的可行性

《CSS揭秘》第五章：字體排印

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

React state與props學(xué)習(xí)筆記

{this.props.title}

{this.props.title}

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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