React 高階內容

2021-09-24 16:06:54 字數 2672 閱讀 9126

1、使用 proptypes 型別檢查

官網:使用 proptypes 型別檢查

import react, from 'react';

import proptypes from 'prop-types';

class todoitem extends component

render() = this.props;

return (-) }

handclick() = this.props;

itemdelete(index); }}

todoitem.proptypes =

todoitem.defaultprops =

export default todoitem;

2、props,state,render之間的關係
import react, from 'react';

import test from './test';

class todolist extends component }

render() = this.state;

console.log("render");

return (

);}export default todolist;

子元件demo:

import react, from 'react';

class test extends component }}

export default test;

3、虛擬dom的diff演算法

react 中虛擬dom(js物件) 的 diff 演算法:

diff演算法: 找原始虛擬dom 和新的虛擬dom直接的差異。

資料發生改變的時候才會產生diff 演算法。(state 或者 props 發生改變的時候,也就是 呼叫 setstate()的時候。)

虛擬dom同級比對,發現某一層dom 不對的話,其他的就不比對了,就會把這層以下的所有的dom全部替換為新的虛擬dom。

虛擬dom在迴圈的時候能不用index做key值就盡量不用。

4、ref的使用

import react, from 'react';

import todoitem from './todoitem';

import './style.css';

class todolist extends component

this.handlechange = this.handlechange.bind(this);

this.handbtnclick = this.handbtnclick.bind(this);

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

render() = this.state;

return (

輸入內容

} />

提交); }

handlechange(e) ));

}handbtnclick() ),()=>);

// console.log(this.ul.queryselectorall('li').length);

}export default todolist;

5、生命週期

**元件生命週期函式是指在某一時刻自動會被執行的函式

官網-生命週期

// 元件被掛載之前執行

componentwillmount()

render()

// 元件被更新之前,自動執行

shouldcomponentupdate()

// 元件被更新之前,自動執行,但是前提是shouldcomponentupdate返回true時才會執行

componentwillupdate()

// 元件更新完之後,自動執行

componentdidupdate()

// 元件被掛載在頁面之後,自動執行

componentdidmount()

// 乙個元件要從父元件接收引數

// 只要父元件的render函式被重新執行了,子元件這個生命週期函式就會執行

componentwillreceiveprops()

// 元件被解除安裝時執行

componentwillunmount()

// 子元件效能優化使用

shouldcomponentupdate(nextprops,nextstate) else

}

componentdidmount())

.catch(()=>)

}

6、charles來模擬後端資料
// npm install axios

import axios from 'axios'

componentdidmount() ))

}).catch(() =()

}

React高階元件

想想以前用原生和jquery的專案,上千行的code映入眼簾,瞬間有種昏死過去的衝動。難以維護,改乙個bug可能出現n個bug,真的是很痛苦。於是乎元件化成為了當前前端開發的主流技術。angular vue和react很好的幫我們實現了元件化。但是我們常常也會遇到一種情況,就是兩個元件往往有很多的重...

react高階元件

基本概念 函式可以作為引數被傳遞 函式可以作為返回值輸出 元件作為引數被傳遞,返回值是乙個元件 高階元件是乙個函式 案例 將a元件作為公共元件,bc元件作為a函式的引數,來共享顯示a元件 此處紅框是a元件,紅框裡左邊內容為b元件,右邊內容為c元件 1.建立公共的a元件 將元件a封裝成乙個函式,接收乙...

React 高階元件

高階元件 high order component,hoc 輸入 react 元件 輸出 react 元件 高階元件的作用主要是用來加強元件,通過把基礎元件拆分成很小的粒度,通過高階元件進行增強並返回,以此提高復用性。比如需要開發乙個訊息框,一開始只需要乙個模態框能夠顯示訊息就可以。後來需要多增加 ...