1.上節回顧
生命週期
一個組件從創建到銷燬的過程，稱爲：生命週期
React 在組件的生命週期內的不用階段會調用一些函數，我們把這些函數稱爲：生命週期函數
組件的三個階段：
- Mounting：掛在階段
- Updating：更新階段
- Unmounting：卸載階段
*Mounting 和 Unmounting 階段在組件的整個生命週期中只會出現一次，而Updating 階段會在組件每次更新中執行
1、掛在階段（組件創建到首次渲染到頁面）
- constructor（）
- 構造函數，在創建組件的時候調用一次
- componentWillmount（）
- 在組件即將被掛載的時候調用一次
- render（）
- 渲染
- componentDidMount（）
- 在組件被掛載完成的時候調用一次，可以在這裏使用 refs
2、卸載階段（組件從頁面中移除）
- compontentWillUnmount
- 即將卸載
- *沒有卸載完成
3、更新階段
- componentWillReceiveProps(nextProps)
- 父組件的更新會觸發子組件的這個函數
- nextProps 父組件更新的時候帶來的數據
- shouldComponentUpdate(nextProps,nextState)
- 是否需要重新渲染
- Return false/true
- componentWillUpdate(nextProps,nextState)
- 即將更新
- render
- 渲染
- componentDidUpdate(prevProps,PrevState)
- 完成更新
看完了以上的生命週期，我們就明白了爲什麼上面的效果沒有實現。原因是在組件的更新階段，並沒有執行constructor（），所以也就不會執行裏面的
this.state = {
show:this.props.show
}
不過我們可以藉助這個函數shouldComponentUpdate(nextProps,nextState)
在父組件中添加以下代碼
2.添加動畫
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="./data.js"></script>
<style>
.penel{
border: 1px solid #000;
width: 80%;
}
.title{
margin:0;
padding: 10px;
background: #ccc;
}
p.vip{
color:red;
}
p.message{
color:#aaa;
}
.listWrap{
height:0px;
overflow: hidden;
transition: 0.5s;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class List extends React.Component{
render(){
return (<ul>
{this.props.list.map(function(val,index){
return (
<li key={index}>
<p className="vip">{val.username}</p>
<p className="message">{val.message}</p>
</li>
)
})}
</ul>)
}
}
class Item extends React.Component{
constructor(){
super(...arguments);
this.state = {
show:this.props.show
}
}
showList(show){
var list = this.refs.list;
// if(this.state.show) @
if(show){
list.style.height = list.scrollHeight + 'px';
}else{
list.style.height = 0;
}
}
componentDidMount(){ //掛載 在組件被掛載完成的時候調用一次，可以在這裏使用 refs
console.log('組件已經被渲染到DOM裏面了');
this.showList(this.state.show);
}
shouldComponentUpdate(nextProps,nextState){ //更新 是否需要重新渲染
/* 如果不加$處的代碼，點擊自身讓其收縮的話就實現不了，這是因爲
nextState必須等到完成更新（更新階段componentDidUpdate）之後纔會變,*/
debugger;
console.log(nextProps,nextState);
if(this.state.show != nextProps.show ){//父級傳過來的props: nextProps.show
this.setState({
show: nextProps.show
})
}
// $注意這個時候state還沒有改變過來?????所以如果使用@處的話沒有意義
if(this.state.show != nextState.show){
this.showList(nextState.show)
}
return false; //不讓更新
}
changeList(){
let show = !this.state.show;
this.setState({
show
});
if(show){
console.log("操作其他列表隱藏")
console.log(this.props.onChange);
this.props.onChange(this.props.index);
}
/**
* 1.隱藏當前，不需要改變其他
* 2.展開當前，隱藏其他項的狀態
*/
}
render(){
console.log(this.state.show); //打印之後有問題
return(<div>
<h2 className="title" onClick={this.changeList.bind(this)}>{this.props.data.name}</h2>
<div className="listWrap" ref="list">
<List list={this.props.data.list} />
</div>
</div>)
}
}
class Penel extends React.Component {
constructor(){
super(...arguments);
this.state = {
showList:[true,false,false]
}
this.changeList = this.changeList.bind(this);
}
changeList(i){
// 需要讓當前的第幾個顯示
console.log(i);
let showList = this.state.showList.map(function(val,index){
if(i == index){
return true;
}
return false;
})
this.setState({
showList
});
console.log(this.state.showList); //打印沒問題
}
setShow(){
var list = Object.keys(dataList).map((val,index) => {
return (<Item
data={dataList[val]}
key={index}
show={this.state.showList[index]}
onChange={this.changeList}
index={index}
/>
)
});
return list
}
render(){
return (
<div className="penel">
{this.setShow()}
</div>
);
}
}
ReactDOM.render(
<Penel />,
document.getElementById('app')
);
</script>
</body>
</html>