React 高階內容

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;

import react, from 'react';

import test from './test';
class todolist extends component } 
render() = this.state;
console.log("render");
return (
);}export default todolist;

import react, from 'react';

class test extends component }}
export default test;

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;

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

官網-生命週期

// 元件被掛載之前執行

componentwillmount()
render()
// 元件被更新之前，自動執行
shouldcomponentupdate()
// 元件被更新之前，自動執行，但是前提是shouldcomponentupdate返回true時才會執行
componentwillupdate()
// 元件更新完之後，自動執行 
componentdidupdate()
// 元件被掛載在頁面之後，自動執行 
componentdidmount()
// 乙個元件要從父元件接收引數
// 只要父元件的render函式被重新執行了，子元件這個生命週期函式就會執行
componentwillreceiveprops()
// 元件被解除安裝時執行
componentwillunmount()

// 子元件效能優化使用

shouldcomponentupdate(nextprops,nextstate) else 
}

componentdidmount())

.catch(()=>)
}

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