/*
1.初始化阶段:有ReactDOM.render()触发 --------初次渲染
1. constructor()
2. getDerivedStateFromProps
3. render()
4. componentDidMount
2.更新阶段:由组件内部的this.setState()或父组件重新render触发
1.getDerivedStateFromProps
2.shouldComponentUpdate()
3.render()
4.getSnapshotBeforeUpdate()
5.componentDidUpdate()
3.卸载组件:由ReactDOM.unmountComponentAtNode()触发
1.componentWillUnmount()
*/
class A extends React.Component{
state = {arrList: []}
componentDidMount() {
setInterval(() => {
const {arrList} = this.state
const news = '新闻' + (arrList.length + 1)
this.setState({arrList: [news, ...arrList]})
}, 1000)
}
getSnapshotBeforeUpdate() {
return this.refs.list.scrollHeight
}
componentDidUpdate(preProps, preState, height) {
this.refs.list.scrollTop += this.refs.list.scrollHeight - height
}
render () {
return (
{
this.state.arrList.map((n, index) => {
return
})
}
)
}
}
ReactDOM.render(,document.getElementById('test'))