常用的三個生命周期函數(shù)：componentDidMount相种，render僵闯，componentWillUnmount
舊生命周期
image.png
- 初始化階段: 由ReactDOM.render()觸發(fā)---初次渲染
- constructor()
- componentWillMount()
- render()
- componentDidMount() =====> 常用
一般在這個鉤子中做一些初始化的事，例如：開啟定時器淋叶、發(fā)送網(wǎng)絡請求、訂閱消息
- componentDidMount() =====> 常用
- 更新階段: 由組件內(nèi)部this.setSate()或父組件render觸發(fā)
- shouldComponentUpdate()
- componentWillUpdate()
- render() =====> 必須使用的一個
- componentDidUpdate()
- 卸載組件: 由ReactDOM.unmountComponentAtNode()觸發(fā)
- componentWillUnmount() =====> 常用
一般在這個鉤子中做一些收尾的事，例如：關閉定時器书聚、取消訂閱消息
- componentWillUnmount() =====> 常用
<script type="text/babel">
//創(chuàng)建組件
class Count extends React.Component {
//構造器
constructor(props) {
console.log('Count---constructor');
super(props)
//初始化狀態(tài)
this.state = {count: 0}
}
//加1按鈕的回調
add = () => {
//獲取原狀態(tài)
const {count} = this.state
//更新狀態(tài)
this.setState({count: count + 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');
}
//控制組件更新的“閥門”（不寫shouldComponentUpdate的話react會默認返回true）
shouldComponentUpdate() {
console.log('Count---shouldComponentUpdate');
return true
}
//組件將要更新的鉤子
componentWillUpdate() {
console.log('Count---componentWillUpdate');
}
//組件更新完畢的鉤子
componentDidUpdate() {
console.log('Count---componentDidUpdate');
}
render() {
console.log('Count---render');
const {count} = this.state
return (
<div>
<h2>當前求和為：{count}</h2>
<button onClick={this.add}>點我+1</button>
<button onClick={this.death}>卸載組件</button>
<button onClick={this.force}>不更改任何狀態(tài)中的數(shù)據(jù)，強制更新一下</button>
</div>
)
}
}
//父組件A
class A extends React.Component {
//初始化狀態(tài)
state = {carName: '奔馳'}
changeCar = () => {
this.setState({carName: '奧拓'})
}
render() {
return (
<div>
<div>我是A組件</div>
<button onClick={this.changeCar}>換車</button>
<B carName={this.state.carName}/>
</div>
)
}
}
//子組件B
class B extends React.Component {
//組件將要接收新的props的鉤子（第一次不會觸發(fā)）
componentWillReceiveProps(props) {
console.log('B---componentWillReceiveProps', props);
}
//控制組件更新的“閥門”
shouldComponentUpdate() {
console.log('B---shouldComponentUpdate');
return true
}
//組件將要更新的鉤子
componentWillUpdate() {
console.log('B---componentWillUpdate');
}
//組件更新完畢的鉤子
componentDidUpdate() {
console.log('B---componentDidUpdate');
}
render() {
console.log('B---render');
return (
<div>我是B組件，接收到的車是:{this.props.carName}</div>
)
}
}
//渲染組件
ReactDOM.render(<Count/>, document.getElementById('test'))
</script>
新生命周期
image.png
- 初始化階段: 由ReactDOM.render()觸發(fā)---初次渲染
- constructor()
- getDerivedStateFromProps
很少用雌续，若state的值在任何時候都取決于props斩个，那么可以使用getDerivedStateFromProps
- getDerivedStateFromProps
- render()
- componentDidMount() =====> 常用
一般在這個鉤子中做一些初始化的事，例如：開啟定時器驯杜、發(fā)送網(wǎng)絡請求受啥、訂閱消息
- componentDidMount() =====> 常用
- 更新階段: 由組件內(nèi)部this.setSate()或父組件重新render觸發(fā)
- getDerivedStateFromProps
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate
很少用，在componentDidUpdate之前調用鸽心，可以在這里返回一個值（組件更新之前的值）滚局，在componentDidUpdate可以接收這個值。componentDidUpdate(preProps, preState, snapshotValue)
- getSnapshotBeforeUpdate
- componentDidUpdate()
- 卸載組件: 由ReactDOM.unmountComponentAtNode()觸發(fā)
- componentWillUnmount() =====> 常用
一般在這個鉤子中做一些收尾的事再悼，例如：關閉定時器核畴、取消訂閱消息
- componentWillUnmount() =====> 常用
<script type="text/babel">
//創(chuàng)建組件
class Count extends React.Component {
//構造器
constructor(props) {
console.log('Count---constructor');
super(props)
//初始化狀態(tài)
this.state = {count: 0}
}
//加1按鈕的回調
add = () => {
//獲取原狀態(tài)
const {count} = this.state
//更新狀態(tài)
this.setState({count: count + 1})
}
//卸載組件按鈕的回調
death = () => {
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
}
//強制更新按鈕的回調
force = () => {
this.forceUpdate()
}
//若state的值在任何時候都取決于props，那么可以使用getDerivedStateFromProps
static getDerivedStateFromProps(props, state) {
console.log('getDerivedStateFromProps', props, state);
// return null
return props
}
//在更新之前獲取快照
getSnapshotBeforeUpdate() {
console.log('getSnapshotBeforeUpdate');
// 快照值可以是任意值
return 'atguigu'
}
//組件掛載完畢的鉤子
componentDidMount() {
console.log('Count---componentDidMount');
}
//組件將要卸載的鉤子
componentWillUnmount() {
console.log('Count---componentWillUnmount');
}
//控制組件更新的“閥門”
shouldComponentUpdate() {
console.log('Count---shouldComponentUpdate');
return true
}
//組件更新完畢的鉤子
componentDidUpdate(preProps, preState, snapshotValue) {
// 在這里可以接收到快照值冲九，然后做一些操作谤草。
//比如在這里獲取元素的最新高度和傳進來的快照值（舊的高度），就可以計算出滾動距離莺奸。
console.log('Count---componentDidUpdate', preProps, preState, snapshotValue);
}
render() {
console.log('Count---render');
const {count} = this.state
return (
<div>
<h2>當前求和為：{count}</h2>
<button onClick={this.add}>點我+1</button>
<button onClick={this.death}>卸載組件</button>
<button onClick={this.force}>不更改任何狀態(tài)中的數(shù)據(jù)丑孩，強制更新一下</button>
</div>
)
}
}
//渲染組件
ReactDOM.render(<Count count={199}/>, document.getElementById('test'))
</script>
