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 元件 高階元件的作用主要是用來加強元件,通過把基礎元件拆分成很小的粒度,通過高階元件進行增強並返回,以此提高復用性。比如需要開發乙個訊息框,一開始只需要乙個模態框能夠顯示訊息就可以。後來需要多增加 ...