旧版生命周期
- render
初始化渲染和更新state数据
- componentWillMount
组件将要挂载
- componentDidMount
组件挂载完毕
- componentWillReceiveProps
子组件将要接收props值时调用
- shouldComponentUpdate
是否开启更新功能。返回值为true，开启更新功能。返回值为false，关闭更新功能。默认为true
- componentWillUpdate
组件更新之前
- componentDitUpdate
组件更新完毕
- componetWillUnmout
组件卸载之前
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>旧生命周期</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="js/react.development.js"></script>
<script type="text/javascript" src="js/react-dom.development.js"></script>
<script type="text/javascript" src="js/babel.min.js"></script>
<script type="text/javascript" src="js/prop-types.js"></script>
<script type="text/babel">
class Count extends React.Component{
// 构造器
constructor(props){
super(props)
this.state={num:1}
}
add=()=>{
const {num}=this.state
this.setState({num:num+1})
}
death=()=>{
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
}
force=()=>{
this.forceUpdate();
}
// 组件挂载之前
componentWillMount(){
console.log('Count--componentWillMount');
}
// 组件挂载之后
componentDidMount(){
console.log('Count--componentDidMount');
}
// 组件卸载之前
componentWillUnmount(){
console.log('Count--componentWillUnmount');
}
// 控制组件是否更新 true开启更新,false关闭更新
shouldComponentUpdate(){
console.log('Count--shouldComponentUpdate');
}
// 组件更新之前
componentWillUpdate(){
console.log('Count--componentWillUpdate');
}
// 组件更新之后
componentDidUpdate(){
console.log('Count--componentDidUpdate');
}
render(){
console.log('Count--render');
const {num}=this.state;
return(
<div>
<h2>当前为{num}</h2>
<button onClick={this.add}>点我+1</button>
<button onClick={this.death}>点我卸载</button>
<button onClick={this.force}>点我强制更新</button>
</div>
)
}
}
class A extends React.Component{
state={carName:'奔驰'}
changeCar=()=>{
this.setState({carName:'奥拓'})
}
render(){
return(
<div>
<div>我是A组件</div>
<button onClick={this.changeCar}>换车</button>
<B carName={this.state.carName}/>
</div>
)
}
}
class B extends React.Component{
// 组件接收新props之前
componentWillReceiveProps(){
console.log('B--componentWillReciveProps');
}
// 控制组件是否更新 true开启更新,false关闭更新
shouldComponentUpdate(){
console.log('B--shouldComponentUpdate');
}
// 控制组件是否更新 true开启更新,false关闭更新
shouldComponentUpdate(){
return true
console.log('B--shouldComponentUpdate');
}
// 组件更新之前
componentWillUpdate(){
console.log('B--componentWillUpdate');
}
// 组件更新之后
componentDidUpdate(){
console.log('B--componentDidUpdate');
}
render(){
console.log('B--render');
return(
<div>
<div>我是B组件,接收的车是:{this.props.carName}</div>
</div>
)
}
}
ReactDOM.render(<Count/>,document.getElementById('test'))
</script>
</body>
</html>
新版生命周期
当使用componentWillMount、componentDidMount、componentWillReceiveProps时，需要添加UNSAFE_前缀进行使用
- getDerivedStateFromProps
- 用static定义为类方法使用
- 返回值为null或state对象
- 接收props和state形参
- 当返回值为state对象的某个属性时，该属性将影响state中的同名属性，且无法对属性进行值的修改
- getSnapshotBeforeUpdate
- 返回值为null或Snapshot值
- Snapshot值，通过componentDidUpdate接收
- Snapshot值通过componentDidUpdate接收，监听数据的变化状态
- componentDidUpdate
1.形参接收之前的Props值、之前的state值、Snapshot值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新生命周期</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="js/new/react.development.js"></script>
<script type="text/javascript" src="js/new/react-dom.development.js"></script>
<script type="text/javascript" src="js/new/babel.min.js"></script>
<script type="text/javascript" src="js/new/prop-types.js"></script>
<script type="text/babel">
class Count extends React.Component{
// 构造器
constructor(props){
console.log('Count--constructor');
super(props)
this.state={num:1}
}
add=()=>{
const {num}=this.state
this.setState({num:num+1})
}
death=()=>{
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
}
force=()=>{
this.forceUpdate();
}
// 组件挂载之后
componentDidMount(){
console.log('Count--componentDidMount');
}
// 组件卸载之前
componentWillUnmount(){
console.log('Count--componentWillUnmount');
}
// 控制组件是否更新 true开启更新,false关闭更新
shouldComponentUpdate(){
console.log('Count--shouldComponentUpdate');
return true
}
static getDerivedStateFromProps(props,state){
console.log('count--getDerivedStateFromProps',props,state);
return null
}
// 更新之前快照
getSnapshotBeforeUpdate(){
console.log('Count--getSnapshotBeforeUpdate')
return '123'
}
// 组件更新之后
componentDidUpdate(preProps,preState,snapshotValue){
console.log('Count--componentDidUpdate',preProps,preState,snapshotValue);
}
render(){
console.log('Count--render');
const {num}=this.state;
return(
<div>
<h2>当前为{num}</h2>
<button onClick={this.add}>点我+1</button>
<button onClick={this.death}>点我卸载</button>
<button onClick={this.force}>点我强制更新</button>
</div>
)
}
}
ReactDOM.render(<Count num='199'/>,document.getElementById('test'))
</script>
</body>
</html>
getSnapshotBeforeUpdate使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>练习</title>
<style>
.list {
width: 200px;
height: 150px;
background-color: skyblue;
overflow: auto;
}
.news {
height: 30px;
}
</style>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="js/new/react.development.js"></script>
<script type="text/javascript" src="js/new/react-dom.development.js"></script>
<script type="text/javascript" src="js/new/babel.min.js"></script>
<script type="text/javascript" src="js/new/prop-types.js"></script>
<script type="text/babel">
class NewsList extends React.Component{
state={newsArr:[]}
componentDidMount(){
setInterval(()=>{
const {newsArr}=this.state;
const news='新闻'+(newsArr.length+1)
this.setState({newsArr:[news,...newsArr]})
},1000)
}
getSnapshotBeforeUpdate(){
console.log('123');
return this.refs.list.scrollHeight
}
componentDidUpdate(propProps,propState,height){
console.log(this.refs.list.scrollTop,this.refs.list.scrollHeight,height);
this.refs.list.scrollTop+=this.refs.list.scrollHeight-height
}
render(){
return(
<div className="list" ref="list">
{
this.state.newsArr.map((e,index)=>{
return <div className="news" key={index}>{e}</div>
})
}
</div>
)
}
}
ReactDOM.render(<NewsList/>,document.getElementById('test'))
</script>
</body>
</html>
