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>