<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生命周期</title>
<style>
.title{
width: 200px;
background-color: coral;
}
</style>
</head>
<body>
<!-- 准备一个"容器" -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作dom -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于将ajax转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 引入prop-types 用于对组件标签属性进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
//1.创建组件
class Demo extends React.Component{
constructor(props){
console.log('Demo--constructor');
super(props)
//初始化状态
this.state = {
count:0
}
}
//加1的回调函数
add=()=>{
const {count} = this.state
this.setState({count:count+1})
}
//卸载组件按钮的回调
del = ()=>{
//卸载组件
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
}
//组件将要挂载的钩子
componentWillMount(){
console.log('Demo--componentDidMount');
}
//组件挂载完毕的钩子
componentDidMount(){
console.log('Demo--componentDidMount');
}
//组件将要卸载的钩子
componentWillUnmount(){
console.log('Demo--componentWillUnmount');
}
//控制组件更新的'阀门'
shouldComponentUpdate(){
console.log('Demo--shouldComponentUpdate');
//返回true 继续执行页面的更新渲染等
//返回false 不往下执行了
return true
}
//组件将要更新的钩子
componentWillUpdate(){
console.log('Demo--componentWillUpdate');
}
//组件更新完毕的钩子
//会传入两个参数 一个是更新之前的preprops,一个是更新之前的prestate
componentDidUpdate(preprops,prestate){
console.log('Demo--componentDidUpdate',preprops,prestate);
}
//状态初始化和更新之后
render() {
console.log('Demo--render');
return (
<div>
<h2>当前求和为:{this.state.count}</h2>
<button onClick={this.add} >点我+1</button>
<button onClick={this.del}>点我卸载当前组件</button>
</div>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>
新
尽量不用
getSnapshotBeforeUpdate()应用
实现滑动滑块后,页面更新时不改变当前显示内容
原理 在更新完毕之前也就是在didupdate之前 页面的高度是未更新的 所以 在更新时传入更新前的容器高度
当前容器的页面高度+= 用更新后的容器高度减去更新前的也就是getSnapshotBeforeUpdate()传入的高度
就实现当前效果了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生命周期</title>
<style>
.list{
height: 100px;
overflow: auto;
width: 100px;
background-color: sandybrown;
}
.title{
width: 200px;
background-color: coral;
}
</style>
</head>
<body>
<!-- 准备一个"容器" -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作dom -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于将ajax转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 引入prop-types 用于对组件标签属性进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
//1.创建组件
class Demo extends React.Component{
state={
newsArr:[]
}
componentDidMount(){
setInterval(()=>{
const {newsArr} = this.state
let news = '新闻'+(newsArr.length+1)
this.setState({newsArr:[news,...newsArr]})
},1000)
}
getSnapshotBeforeUpdate(){
return this.refs.list.scrollHeight
}
componentDidUpdate(PreProps,PreState,Height){
this.refs.list.scrollTop += this.refs.list.scrollHeight - Height
}
render() {
return (
<div className='list' ref='list'>
{this.state.newsArr.map((item,index)=>(
<div key={index}>{item}</div>
))}
</div>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>