props 和 state的區別

2021-08-19 21:10:50 字數 1641 閱讀 4631

一、時效性

所有資訊都具有時效性。文章的價值,往往跟時間有很大關聯。特別是技術類文章,請注意本文建立時間,如果本文過於久遠,請讀者酌情考量,莫要浪費時間。

二、背景

在學習react的過程中,頻繁的跟props和state打交道,對於初學者來說,不知道什麼情況下來使用它們有時候不知道在什麼情況下來使用它們。

三、區別

props和state之間是緊密相關的。父元件的state常常轉變子元件的props成下面我們通過乙個父子元件從上至下來分析它們。

假如我們有個父元件,可以在父元件的state裡定義子元件的資料比如:

this

.setstate();

緊接著,在父元件的render()方法裡面,可以將父元件的state,作為子元件的props傳遞下去,如下

data = />
這樣就可以父元件的state傳遞給子元件的props。從子元件的角度來看,props是不可變的。如何改變子元件的props?我們僅僅需要改變父元件內部的state即可,父元件的state改變之後,引起父元件重新渲染,在渲染的過程中,子元件的data變成父元件this.state.childdtat的值。這樣父元件內部state改變,就會引起子元件的改變。

這樣就形成裡從上而下的資料流,也就是react常說的單向資料流,這個「向」是向下。

我們常常利用這個原理更新子元件,從而衍生出一種模式,父元件:處理複雜的業務邏輯、互動以及資料等。子元件:稱它為stateless元件即無狀態元件,只用作展示。在我們開發過程中,盡可能多個使用無狀態元件,可以縷清業務之間的邏輯關係,提高渲染效率。

如果子元件想要改變自身的data,這時候需要,父元件傳遞給子元件乙個方法,改變父元件自身的state。

父元件:

data=

handlechange=>

child>

子元件接收父元件方法

let

chilid = () =>

四、小結

==props:==一般用於父元件向子元件通訊,在元件之間通訊使用。

==state:==一般用於元件內部的狀態維護,更新組建內部的資料,狀態,更新子元件的props等。

五、完整**

父元件

import react,  from 'react';

import child from './components/child'

class

extends

component

};this.handelchildchange = this.handelchildchange.bind(this);

}handelchildchange()})}

render() }>

this.state.childdata} handlechange=>

div>);}

}

子元件:這裡使用無狀態元件,解構賦值以及無狀態元件使用父元件方法

import react from 'react';

letchilid = () =>

export

default chilid

state 和 props 之間的區別

setstate 會對乙個元件的state物件安排一次更新。當 state 改變了,該元件就會重新渲染。呼叫setstate其實是非同步的 不要指望在呼叫setstate之後,this.state會立即對映為新的值。如果你需要基於當前的 state 來計算出新的值,那你應該傳遞乙個函式,而不是乙個物...

React學習(五) Props和State

react 是單向資料流。父元件可以把它的 state props 通過 props 傳遞給它的子元件來實現元件之間的通訊。props 本身是不可變的,但是有一種情形它貌似可變,即是將父元件的state作為子元件的props,當父元件的state改變,子元件的props也跟著改變,其實它仍舊遵循了這...

Antd 的請求過程 state和props的區別

很多小夥伴可能剛接觸antd的時候會遇到這種困惑,這一坨 到底是個什麼鬼,不是類似mvc的開發方式嗎,為毛我把 都寫到了page view 層呢 src pages state models model層 state.js state.js view層 services state.js servi...