2020-07-23

react

受控組件與非受控組件

受控組件通過constructor(props)來設(shè)置this.state.value,然后通過onChange觸發(fā)事件來修改this.state.value的值溉浙,然后又通過標(biāo)簽中的value={this.state.value}來獲取value的值并顯示

class InputSubmit extends React.Component{
    constructor(props){
        super(props);
        this.state={
            value:'',
        }
        this.handleBtnClick=this.handleBtnClick.bind(this);
        this.handleInputChange=this.handleInputChange.bind(this);
    }
    handleBtnClick(event){
        alert(this.state.value)
        event.preventDefault() 
    }
    handleInputChange(event){
        this.setState({
            value: event.target.value,
        })
    }
    render(){
        return <form onSubmit={this.handleBtnClick}>
            <input value={this.state.value} type="text" onChange={this.handleInputChange}></input>
            <button type='submit'>提交</button>
        </form>
    }
}

非受控組件則通過在標(biāo)簽上設(shè)置一個(gè)ref屬性涣澡,然后通過this.來操作真實(shí)的dom

class InputSubmit extends React.Component{
    constructor(props){
        super(props);
        this.handleBtnClick=this.handleBtnClick.bind(this);
    }
    handleBtnClick(event){
        alert(this.textValue.value)
        event.preventDefault() 
    }
    render(){
        return <form onSubmit={this.handleBtnClick}>
            <input type="text" ref={(value)=>{this.textValue=value}}></input>
            <button type='submit'>提交</button>
        </form>
    }
}

遇到的BUG

不懂什么原因含鳞,有些代碼執(zhí)行了多次渺蒿,而且數(shù)組變成了數(shù)字
因?yàn)锳rray.push沒有返回值舞竿,setState后會(huì)出現(xiàn)state變成Number

getValue(value) {
    let vList = this.state.valueList;
    this.setState({
      valueList: vList.push(value)
    })
  }

如何解決

  getValue(value) {
    this.setState({
      valueList: [...this.state.valueList,value]
    })
  }

或者

let vList=this.state.valueList;
    vList.push(value)
    this.setState({
      valueList: vList
    })

setState中的一些用法

// 1搀捷、修改object中某項(xiàng)
 
this.setState({
  object: {...object, key: value}
});
  // 2魁索、刪除數(shù)組首位
 
array.splice(0, 1);
this.setState({
  array
});
  // 3融撞、刪除數(shù)組尾部
 
array.splice(array.length - 1);
this.setState({
  array
});
  // 4、刪除數(shù)組任意一項(xiàng)
 
array.splice(index, 1);
this.setState({
  array
});
  // 5粗蔚、數(shù)組尾部添加一項(xiàng)
 
this.setState({
  array: [...array, item]
});
 //  6尝偎、數(shù)組頭部添加一項(xiàng)
 
this.setState({
  array: [item, ...array]
});
  7、數(shù)組任意位置添加一項(xiàng)
 
array.splice(index, 0, item);
this.setState({
  array
});
 // 8鹏控、修改數(shù)組中任意一項(xiàng)中值
 
function updateArrayItem(index, key, value) {
  this.setState({
    array: array.map((item, _index) => _index == index ? {...item, [key]: value} : item)
  });
}
//  9致扯、復(fù)雜類型修改
 
this.setState(prevState => return newState);

摘自https://blog.csdn.net/hahahhahahahha123456/java/article/details/104922711

Context

Props是由上向下單向傳遞的
Context提供了組件中共享此類值的方法

虛擬DOM

用js對象的形式,來模擬瀏覽器中DOM的嵌套關(guān)系與DOM對比來實(shí)現(xiàn)頁面的高效更新

Diff算法

tree diff :新舊兩顆dom樹逐層對比就是tree diff
component diff:在tree diff對比中当辐,每一層component 的對比稱為component diff
element diff:在進(jìn)行component diff中如果組件相同抖僵,則需要進(jìn)行element對比 就是element diff

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市缘揪,隨后出現(xiàn)的幾起案子耍群,更是在濱河造成了極大的恐慌,老刑警劉巖找筝,帶你破解...
    沈念sama閱讀 211,042評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蹈垢,死亡現(xiàn)場離奇詭異,居然都是意外死亡袖裕,警方通過查閱死者的電腦和手機(jī)曹抬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來急鳄,“玉大人谤民,你說我怎么就攤上這事〖埠辏” “怎么了张足?”我有些...
    開封第一講書人閱讀 156,674評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長坎藐。 經(jīng)常有香客問我为牍,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,340評(píng)論 1 283
  • 正文 為了忘掉前任吵聪,我火速辦了婚禮凌那,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘吟逝。我一直安慰自己帽蝶,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,404評(píng)論 5 384
  • 文/花漫 我一把揭開白布块攒。 她就那樣靜靜地躺著励稳,像睡著了一般。 火紅的嫁衣襯著肌膚如雪囱井。 梳的紋絲不亂的頭發(fā)上驹尼,一...
    開封第一講書人閱讀 49,749評(píng)論 1 289
  • 那天,我揣著相機(jī)與錄音庞呕,去河邊找鬼新翎。 笑死,一個(gè)胖子當(dāng)著我的面吹牛住练,可吹牛的內(nèi)容都是我干的地啰。 我是一名探鬼主播,決...
    沈念sama閱讀 38,902評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼讲逛,長吁一口氣:“原來是場噩夢啊……” “哼亏吝!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起盏混,我...
    開封第一講書人閱讀 37,662評(píng)論 0 266
  • 序言:老撾萬榮一對情侶失蹤蔚鸥,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后许赃,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體止喷,經(jīng)...
    沈念sama閱讀 44,110評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評(píng)論 2 325
  • 正文 我和宋清朗相戀三年图焰,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了启盛。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蹦掐。...
    茶點(diǎn)故事閱讀 38,577評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡技羔,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出卧抗,到底是詐尸還是另有隱情藤滥,我是刑警寧澤,帶...
    沈念sama閱讀 34,258評(píng)論 4 328
  • 正文 年R本政府宣布社裆,位于F島的核電站拙绊,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜标沪,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,848評(píng)論 3 312
  • 文/蒙蒙 一榄攀、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧金句,春花似錦檩赢、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至趁曼,卻和暖如春军浆,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背挡闰。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評(píng)論 1 264
  • 我被黑心中介騙來泰國打工乒融, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人摄悯。 一個(gè)月前我還...
    沈念sama閱讀 46,271評(píng)論 2 360
  • 正文 我出身青樓簇抵,卻偏偏與公主長得像,于是被迫代替她去往敵國和親射众。 傳聞我的和親對象是個(gè)殘疾皇子碟摆,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,452評(píng)論 2 348