生命周期相關函數(shù)
生命周期共提供了10個不同的API。
1.getDefaultProps
作用于組件類，只調用一次，返回對象用于設置默認的props，對于引用值，會在實例中共享。
2.getInitialState
作用于組件的實例，在實例創(chuàng)建時調用一次，用于初始化每個實例的state，此時可以訪問this.props。
3.componentWillMount
在完成首次渲染之前調用，此時仍可以修改組件的state。
4.render
必選的方法，創(chuàng)建虛擬DOM，該方法具有特殊的規(guī)則：
只能通過this.props和this.state訪問數(shù)據
可以返回null、false或任何React組件
只能出現(xiàn)一個頂級組件（不能返回數(shù)組）
不能改變組件的狀態(tài)
不能修改DOM的輸出
5.componentDidMount
真實的DOM被渲染出來后調用，在該方法中可通過this.getDOMNode()訪問到真實的DOM元素。此時已可以使用其他類庫來操作這個DOM。
在服務端中，該方法不會被調用。
6.componentWillReceiveProps
組件接收到新的props時調用，并將其作為參數(shù)nextProps使用，此時可以更改組件props及state。
componentWillReceiveProps: function(nextProps) {
if (nextProps.bool) {
this.setState({
bool: true
});
}
}
7.shouldComponentUpdate
組件是否應當渲染新的props或state，返回false表示跳過后續(xù)的生命周期方法，通常不需要使用以避免出現(xiàn)bug。在出現(xiàn)應用的瓶頸時，可通過該方法進行適當?shù)膬?yōu)化。
在首次渲染期間或者調用了forceUpdate方法后，該方法不會被調用
8.componentWillUpdate
接收到新的props或者state后，進行渲染之前調用，此時不允許更新props或state。
9.componentDidUpdate
完成渲染新的props或者state后調用，此時可以訪問到新的DOM元素。
10.componentWillUnmount
組件被移除之前被調用，可以用于做一些清理工作，在componentDidMount方法中添加的所有任務都需要在該方法中撤銷，比如創(chuàng)建的定時器或添加的事件監(jiān)聽器。
image.png
生命周期簡單模板
class name extend component{
static defluteProps={
name:'name',
},
constructor(props){
super(props);
this.state={.......}
},
componmentsWillmount(){
},
doSomething = () => {
require.ensure(['./app2',....], (require) => {
const Comp = require('./app2');
this.setState({
currentComponent: <Comp/>
})
})
};
render(){
render(){
<div>{this.state}</div>
}
}
}
組件之間傳值
- 父組件 向 子組件 傳遞信息 >>>主要是通過 prop進行傳值
<span style="font-size:18px;">//父組件
var MyContainer = React.createClass({
getInitialState: function () {
return {
checked: false
};
},
render: function() {
return (
<ToggleButton text="Toggle me" checked={this.state.checked} />
);
}
});
// 子組件
var ToggleButton = React.createClass({
render: function () {
// 從（父組件）獲取的值
var checked = this.props.checked,
text = this.props.text;
return (
<label>{text}: <input type="checkbox" checked={checked} /></label>
);
}
});</span>
- 子組件 向 父組件 傳遞信息
<span style="font-size:18px;">// 父組件
var MyContainer = React.createClass({
getInitialState: function () {
return {
checked: false
};
},
onChildChanged: function (newState) {
this.setState({
checked: newState
});
},
render: function() {
var isChecked = this.state.checked ? 'yes' : 'no';
return (
<div>
<div>Are you checked: {isChecked}</div>
<ToggleButton text="Toggle me"
initialChecked={this.state.checked}
callbackParent={this.onChildChanged}
/>
</div>
);
}
});
// 子組件
var ToggleButton = React.createClass({
getInitialState: function () {
return {
checked: this.props.initialChecked
};
},
onTextChange: function () {
var newState = !this.state.checked;
this.setState({
checked: newState
});
//這里將子組件的信息傳遞給了父組件
this.props.callbackParent(newState);
},
render: function () {
// 從（父組件）獲取的值
var text = this.props.text;
// 組件自身的狀態(tài)數(shù)據
var checked = this.state.checked;
//onchange 事件用于單選框與復選框改變后觸發(fā)的事件。
return (
<label>{text}: <input type="checkbox" checked={checked} onChange={this.onTextChange} /></label>
);
}
});</span>
以上例子中，在父組件綁定callbackParent={this.onChildChanged}，在子組件利用this.props.callbackParent(newState),觸發(fā)了父級的的this.onChildChanged方法，進而將子組件的數(shù)據（newState）傳遞到了父組件。
這樣做其實是依賴 props 來傳遞事件的引用，并通過回調的方式來實現(xiàn)的。
- 兄弟組件之間的傳值
<span style="font-size:18px;">// 定義一個容器（將ProductSelection和Product組件放在一個容器中）
var ProductList = React.createClass({
render: function () {
return (
<div>
<ProductSelection />
<Product name="product 1" />
<Product name="product 2" />
<Product name="product 3" />
</div>
);
}
});
// 用于展示點擊的產品信息容器
var ProductSelection = React.createClass({
getInitialState: function() {
return {
selection: 'none'
};
},
componentDidMount: function () {
//通過PubSub庫訂閱一個信息
this.pubsub_token = PubSub.subscribe('products', function (topic, product) {
this.setState({
selection: product
});
}.bind(this));
},
componentWillUnmount: function () {
//當組件將要卸載的時候，退訂信息
PubSub.unsubscribe(this.pubsub_token);
},
render: function () {
return (
<p>You have selected the product : {this.state.selection}</p>
);
}
});
var Product = React.createClass({
onclick: function () {
//通過PubSub庫發(fā)布信息
PubSub.publish('products', this.props.name);
},
render: function() {
return <div onClick={this.onclick}>{this.props.name}</div>;
}
});</span>
這個例子需要引入一個PubSubJS 庫，通過這個庫你可以訂閱的信息，發(fā)布消息以及消息退訂。
ProductSelection和Product本身是沒有嵌套關系的，而是兄弟層級的關系。但通過在ProductSelection組件中訂閱一個消息，在Product組件中又發(fā)布了這個消息，使得兩個組件又產生了聯(lián)系，進行傳遞的信息。所以根據我個人的理解，當兩個組件沒有嵌套關系的時候，也要通過全局的一些事件等，讓他們聯(lián)系到一起，進而達到傳遞信息的目的。
- 利用react-redux進行組件之間的狀態(tài)信息共享
require.ensure()按需加載
require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])
dependencies: 依賴的模塊數(shù)組
callback: 回調函數(shù)，該函數(shù)調用時會傳一個require參數(shù)
chunkName: 模塊名，用于構建時生成文件時命名使用
路由配置模板
const RouteConfig = (
<Router history={history}>
<Route path="/" component={Roots}>
<IndexRoute component={index} />//首頁
<Route path="index" component={index} />
<Route path="helpCenter" getComponent={helpCenter} />//幫助中心
<Route path="saleRecord" getComponent={saleRecord} />//銷售記錄
<Redirect from='*' to='/' />
</Route>
</Router>
);
fetch 簡單使用 第二個參數(shù)為可選
var myHeaders = new Headers();
var myInit = {
method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default'
};
fetch(url,myInit).then(function(response) {
return response.blob();
}).then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});