1、生命周期的一个例子引出生命周期函数(钩子函数)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
<title>Life</title>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
//创建类组件
class Life extends React.Component{
state={
opacity: 1
}
removeDom=()=>{
ReactDOM.unmountComponentAtNode(document.getElementById('app'))
}
componentDidMount(){
this.timer=setInterval(()=>{
//获取state的opacity值并判断大小进而修改
let {opacity}=this.state
if (opacity<=0){
opacity=1
}else{
opacity-=0.1
}
this.setState({opacity:opacity})
},200)
}
componentWillUnmount(){
clearInterval(this.timer)
}
render (){
return(
<div>
<h2 style={{opacity:this.state.opacity}}>react学不会怎么办</h2>
<button onClick={this.removeDom}>删除节点</button>
</div>
)
}
}
//渲染类组件
ReactDOM.render(<Life/>,document.getElementById('app'))
</script>
</body>
</html>
2、生命周期钩子(旧)
- construct()
- componentWillMount()
- componentDidMount()
- render()
- componentDidUnMount()
父组件render
componentWillRceiveProps()
shouldComponentUpdate()
componentWillUpdate()
componentDidUpdate()
4、父子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
<title>Life</title>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
//创建类组件
class Father extends React.Component{
state={
carName:'丰田'
}
changeCar=()=>{
this.setState({carName:'奔驰'})
}
render(){
return (
<div>
<h1>我是父亲组件</h1>
<button onClick={this.changeCar}>换车</button>
<Son carName={this.state.carName}/>
</div>
)
}
}
class Son extends React.Component{
render(){
return(
<p>您现在的座驾是{this.props.carName}</p>
)
}
}
//渲染类组件
ReactDOM.render(<Father/>,document.getElementById('app'))
</script>
</body>
</html>
5、生命周期总结(旧)
1. 初始化阶段: 由ReactDOM.render()触发—初次渲染
- constructor()
- componentWillMount()
- render()
- componentDidMount()
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
- shouldComponentUpdate()
- componentWillUpdate()
- render()
- componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
- componentWillUnmount()
6、生命周期钩子(新)
7、getDrivedStateFromProps钩子
不必过分了解 ,罕见状态,略
8、getSnapshotBeforeUpdate钩子
传递三个参数,一个是preprops,一个是prestate,一个是snaopshotValue,也就是更新前的快照
一个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
<style type="text/css">
.news{
line-height: 30px;
background-color: bisque;
}
.newsContainer{
width: 200px;
height: 200px;
background-color: aqua;
overflow: auto;
}
</style>
<title>Life</title>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
//创建类组件
class NewsList extends React.Component{
state={
newsArray:[]
}
componentDidMount(){
setInterval(()=>{
const {newsArray}=this.state
let oneNews='新闻'+(newsArray.length+1)
this.setState({newsArray: [oneNews,...newsArray]})
},1000)
}
getSnapshotBeforeUpdate(){
return this.refs.list.scrollHeight
}
componentDidUpdate(preProps,preState,height){
this.refs.list.scrollTop+=this.refs.list.scrollHeight-height
}
render(){
return (
<div className="newsContainer" ref="list">
{
this.state.newsArray.map((item,index)=>{
return <div className="news" key={index}>{item}</div>
})
}
</div>
)
}
}
//渲染类组件
ReactDOM.render(<NewsList/>,document.getElementById('app'))
</script>
</body>
</html>
9、生命周期总结
生命周期的三个阶段(新)
1. 初始化阶段: 由ReactDOM.render()触发—初次渲染
- constructor()
- getDerivedStateFromProps
- render()
- componentDidMount()
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
- getDerivedStateFromProps
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate
- componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
10. componentWillUnmount()
重要的勾子
- render:初始化渲染或更新渲染调用
- componentDidMount:开启监听, 发送ajax请求
- componentWillUnmount:做一些收尾工作, 如: 清理定时器
即将废弃的勾子
- componentWillMount
- componentWillReceiveProps
- componentWillUpdate
现在使用会出现警告,下一个大版本需要加上UNSAFE_前缀才能使用,以后可能会被彻底废弃,不建议使用。
10、dom的diffing算法
一个时间更新小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
<style type="text/css">
.news{
line-height: 30px;
background-color: bisque;
}
.newsContainer{
width: 200px;
height: 200px;
background-color: aqua;
overflow: auto;
}
</style>
<title>Life</title>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
//创建类组件
class Time extends React.Component{
state={
date:new Date()
}
componentDidMount(){
setInterval(()=>{
this.setState({
date:new Date()
})
},1000)
}
render(){
return (
<div>
<h1>hello</h1>
<input type="text"/>
<span>现在是:{this.state.date.toTimeString()}</span>
</div>
)
}
}
//渲染类组件
ReactDOM.render(<Time/>,document.getElementById('app'))
</script>
</body>
</html>