组件挂载时的流程:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</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,用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class Count extends React.Component {
constructor (props) {
console.log('Count-constructor')
super(props)
}
state = {
number:0
}
demo1 = () => {
let {number} = this.state
number += 1
this.setState({number})
}
// 组件将要挂载的钩子
componentWillMount () {
console.log('ComponentWillMount')
}
// 组件挂载完毕的钩子
componentDidMount () {
console.log('ComponentDidMount')
}
render () {
console.log('count-render')
return (
<div>
<h2>当前求和为{this.state.number}</h2>
<button onClick={this.demo1}>点我加1</button>
</div>
)
}
}
ReactDOM.render(<Count />,document.getElementById('test'))
</script>
</body>
</html>
组件更新时的 流程:
1.shouldComponentUpdate钩子函数
相当于一个阀门,如果该函数内部返回的是true,那么就会继续执行下去;返回的是false,那么就不会再往下执行了
shouldComponentUpdate () {
return true
}
(1)setstate的更新流程----------第二条线
(2)forceUpdate:不经过shouldComponentUpdate这条线
在不更行状态state中数据的条件下,强制更新
demo2 =() => {
this.forceUpdate()
}
2.componentWillReceiveProps这个钩子作用是接受新的props才会被出发,第一次接受的时候是不会被触发的
<script type="text/babel">
class A extends React.Component {
changeCar = () => {
this.setState({carname:'宝马'})
}
state = {
carname:'奔驰'
}
render () {
return (
<div>
<div onClick={this.changeCar}>A</div>
<B carname={this.state.carname} />
</div>
)
}
}
class B extends React.Component {
// 组件将要接受新的props的钩子
componentWillReceiveProps (props) {
console.log(1)
}
render () {
return (
<div>
<div>B,车的名字是{this.props.carname}</div>
</div>
)
}
}
ReactDOM.render(<A />,document.getElementById('test'))
</script>
类似于created的componentDidMount:
页面一启动就会执行函数
<script type="text/babel">
// 创建组件
class Life extends React.Component {
state = {
opacity:1
}
death = () => {
// 清除定时器
clearInterval(this.timer)
// 清除容器
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
}
// 组件完成挂载,只调用一次
componentDidMount () {
console.log(this)
// this.timer将这个定时器挂载到实例对象身上
this.timer = setInterval (() => {
let {opacity} = this.state
// opacity减小0.1
opacity -= 0.1
if (opacity<=0) {
opacity = 1
}
this.setState({opacity})
},200)
}
render () {
return (
<div>
<h2 style={{opacity:this.state.opacity}}>React学不会怎么办</h2>
<button onClick={this.death}>不活了</button>
</div>
)
}
}
ReactDOM.render(<Life />,document.getElementById('test'))
</script>
清除组件容器:
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
生命周期(新)
(1)getDerivedStateFromProps
用法:几乎不怎么使用
(1)前边必须添加static
(2)必须return一个state状态对象:会将state中的数据进行修改,修改之后这个数据部不会再发生变化了;
或者return null
static getDerivedStateFromProps () {
console.log(123)
return {number:108}
}
(2)getSnapshotBeforeUpdate:
会返回一个值,由componentDidUpdate的第三个参数进行接受,前两个参数是页面数据更新之前,props和state之前的值
getSnapshotBeforeUpdate () {
console.log('getSnapshotBeforeUpdate')
return 'atguigu'
}
componentDidUpdate (prevProps,preState,snapshotValue) {
console.log(prevProps,preState,snapshotValue)
}