生命周期函數指的是組件在某一時刻會自動執行的函數 constructor可以看成一個類的普通生命周期函數，但不是react獨有的生命周期函數 render() 是數據發生變化時會自動執行的函數，因此屬於react的生命周期函數 mounting只在第一次渲染時會執行 import React,{Co ...
生命周期函數指的是組件在某一時刻會自動執行的函數
constructor可以看成一個類的普通生命周期函數，但不是react獨有的生命周期函數
render() 是數據發生變化時會自動執行的函數，因此屬於react的生命周期函數
mounting只在第一次渲染時會執行
import React,{Component} from 'react';
class Counter extends Component{
constructor(props){
super(props);
console.log('constructor');
}
componentWillMount(){
console.log('componentWillMount');
}
componentDidMount(){
console.log('componentDidMount');
}
render(){
console.log('render');
return(
<div>hello react</div>
)
}
}
export default Counter;
可以看到代碼有提示：componentWillMount has been renamed, and is not recommended for use.
這是因為React 16.9包含了一些新特性、bug修複以及新的棄用警告
unsafe 生命周期方法重命名為：
componentWillMount → UNSAFE_componentWillMount
componentWillReceiveProps → UNSAFE_componentWillReceiveProps
componentWillUpdate → UNSAFE_componentWillUpdate
在這種情況下，建議運行一個自動重命名它們的 codemod 腳本：
cd your_project
npx react-codemod rename-unsafe-lifecycles
（註意：這裡使用的是 npx，不是 npm ，npx 是 Node 6+ 預設提供的實用程式。）
運行 codemod 將會替換舊的生命周期，如 componentWillMount 將會替換為 UNSAFE_componentWillMount :
新命名的生命周期（例如：UNSAFE_componentWillMount）在 React 16.9 和 React 17.x 繼續使用，但是，新的 UNSAFE_ 首碼將幫助具有問題的組件在代碼 review 和 debugging 期間脫穎而出。（如果你不喜歡，你可以引入 嚴格模式（Strict Mode）來進一步阻止開發人員使用它 。）
當然按照上述操作完之後，我發現依然會報提示。於是目前能用的方法還是修改react版本
數據發生改變會觸發updation
import React,{Component} from 'react';
class Counter extends Component{
constructor(props){
super(props);
this.updateNum=this.updateNum.bind(this);
console.log('constructor');
this.state={
num:0
}
}
updateNum(){
this.setState({
num:this.state.num+1
})
}
componentWillMount(){
console.log('componentWillMount');
}
componentDidMount(){
console.log('componentDidMount');
}
shouldComponentUpdate(){
console.log('shouldComponentUpdate');
return true;
}
componentWillUpdate(){
console.log('componentWillUpdate');
}
componentDidUpdate(){
console.log('componentDidUpdate');
}
render(){
console.log('render');
return(
<div onClick={this.updateNum}>hello react</div>
)
}
}
export default Counter;
當shouldComponentUpdate返回值設置為false時，不會再觸發updation
import React,{Component} from 'react';
class Counter extends Component{
constructor(props){
super(props);
this.updateNum=this.updateNum.bind(this);
console.log('constructor');
this.state={
num:0
}
}
updateNum(){
this.setState({
num:this.state.num+1
})
}
componentWillMount(){
console.log('componentWillMount');
}
componentDidMount(){
console.log('componentDidMount');
}
shouldComponentUpdate(){
console.log('shouldComponentUpdate');
return false;
}
componentWillUpdate(){
console.log('componentWillUpdate');
}
componentDidUpdate(){
console.log('componentDidUpdate');
}
render(){
console.log('render');
return(
<div onClick={this.updateNum}>hello react</div>
)
}
}
export default Counter;
生命周期函數，也可以叫做鉤子函數
props相關生命周期函數是針對子組件的
新建number.js
import React,{Component} from 'react';
class Number extends Component{
componentWillReceiveProps(){
console.log(' child componentWillReceiveProps');
}
shouldComponentUpdate(){
console.log(' child shouldComponentUpdate');
return true;
}
componentWillUpdate(){
console.log(' child componentWillUpdate');
}
componentDidUpdate(){
console.log(' child componentDidUpdate');
}
render(){
return(
<div>{this.props.num}</div>
)
}
}
export default Number;
生命周期函數使用實例
給全局對象綁定事件
import React,{Component} from 'react';
class Counter extends Component{
clickFn(){
console.log('window click');
}
componentDidMount(){
window.addEventListener("click",this.clickFn);
}
componentWillUnmount(){
window.removeEventListener("click",this.clickFn);
}
render(){
console.log('render');
return(
<div>
<div>hello react</div>
</div>
)
}
}
export default Counter;
接下來演示ajax請求
需要先安裝axios
npm install axios --save
如果是只在開發環境運行，則使用--save-dev
然後引入axios
import axios from 'axios';
import React,{Component} from 'react';
import axios from 'axios';
class Counter extends Component{
componentDidMount(){
axios.get("http://www.dell-lee.com/react/api/demo.json")
.then(res=>{
console.log(res.data);
})
}
render(){
console.log('render');
return(
<div>
<div>hello react</div>
</div>
)
}
}
export default Counter;
