對生命周期的理解：
1, 組件從創建到死亡，它會經歷一些特定的階段
2, React組件包含一系列鉤子函數(生命周期回調函數)，會在特定的時刻被調用
3, 我們在定義組件時，會在特定的生命周期回調函數中，做特定的工作
頁面最后有對生命周期使用的總結：
//1. 創建類式組件
//生命周期回調函數 <=> 生命周期鉤子函數 <=> 生命周期函數 <=> 生命周期鉤子
//對生命周期的理解：
//1, 組件從創建到死亡，它會經歷一些特定的階段
//2, React組件包含一系列鉤子函數(生命周期回調函數)，會在特定的時刻被調用
//3, 我們在定義組件時，會在特定的生命周期回調函數中，做特定的工作
class Life extends React.Component{
//初始化狀態
state = {opacity:1}
//組件掛載完畢
componentDidMount(){
this.timer = setInterval(()=>{
let {opacity} = this.state
opacity -= 0.1
if(opacity <= 0) {
console.log(opacity);
opacity = 1
}
console.log(opacity);
this.setState({opacity:opacity})
},1000)
}
componentWillUnmount(){
clearInterval(this.timer);
}
//調用時機: 初始化渲染，狀態更新之后
render() {
//render 調用幾次 1 + n(第一次渲染，然后當 state狀態更新時，所以這里每當state更新一次，就會再次一次)
//所以把setInterval放在這里不合適
/* setInterval(()=>{
let {opacity} = this.state
opacity -= 0.1
if(opacity <= 0) {
console.log(opacity);
opacity = 1
}
console.log(opacity);
this.setState({opacity:opacity})
},1000) */
return (
<div>
<h1 style={{opacity:this.state.opacity}}>學不會, 怎么辦</h1>
<button onClick={this.die}>不活了</button>
</div>
)
}
die = (event)=>{
//console.log(event.target);
//卸載組件
ReactDOM.unmountComponentAtNode(document.getElementById("test"));
}
}
ReactDOM.render(<Life/>,document.getElementById("test"))舊的生命周期的調用
class Count extends React.Component{
state = {count:0}
//生命周期函數 掛載時如下
//1, constructor(構造器)
//2, componentWillMount(組件將要掛載)
//構造器
constructor(props){
console.log("Count---constructor");
super(props)
}
//組件將要掛載的鉤子
componentWillMount(){
console.log("Count---componentWillMount");
}
//組件掛載完畢的鉤子
componentDidMount(){
console.log("Count---componentDidMount");
}
componentWillUnmount(){
console.log("Count---componentWillUnmount");
}
//組件是否應該更新(true---go,false---stop) 默認返回true
shouldComponentUpdate(){
console.log("Count---shouleComponentUpdate");
return true
//如果是false， 就不再往下走了
}
//組件將要更新的鉤子
componentWillUpdate(){
console.log("Count---componentWillUpdate");
}
//組件更新完畢
componentDidUpdate(){
console.log("Count---componentDidUpdate");
}
render(){
console.log("Count---render");
return (
<div>
<h1>當前的統計總數為: {this.state.count}</h1>
<button onClick={this.add}>點擊+1</button>
<button onClick={this.die}>卸載組件</button>
<button onClick={this.force}>不更改任何狀態值，強制更新一下</button>
</div>
)
}
add = ()=>{
const {count} = this.state
this.setState({count:count+1})
}
//卸載組件按鈕的回調
die = ()=>{
ReactDOM.unmountComponentAtNode(document.getElementById("test"))
}
force = ()=>{
this.forceUpdate();
}
}
ReactDOM.render(<Count/>,document.getElementById("test"))父子組件的調用：
class Parent extends React.Component{
//初始化狀態值
state = {carName:"寶馬"}
//更換車
changeCar = () =>{
this.setState({carName:"奧拓"})
}
render(){
return (
<div>
<h1>我是父組件</h1>
<button onClick={this.changeCar}>換車</button>
<Child carName={this.state.carName} />
</div>
)
}
}
class Child extends React.Component{
//componentWillReceiveProps 第一次接收 屬性值 不執行
componentWillReceiveProps(props){
console.log("子組件",'componentWillReceiveProps',props);
}
shouldComponentUpdate(){
console.log("是否Ok",'shouldComponentUpdate');
return true;
}
componentWillUpdate(){
console.log("子組件",'compoentWillUpdate');
}
componentDidUpdate(){
console.log("子組件","componentDidUpdate");
}
render(){
console.log('子組件渲染');
return (
<div>
我是子組件，接收到汽車是 {this.props.carName}
</div>
)
}
}
ReactDOM.render(<Parent/>, document.getElementById("test"))新版本的生命周期
class Count extends React.Component{
state = {count:0}
//生命周期函數 掛載時如下
//1, constructor(構造器)
//2, componentWillMount(組件將要掛載)
//構造器
constructor(props){
console.log("Count---constructor");
super(props)
}
//組件掛載完畢的鉤子
componentDidMount(){
console.log("Count---componentDidMount");
}
componentWillUnmount(){
console.log("Count---componentWillUnmount");
}
//組件是否應該更新(true---go,false---stop) 默認返回true
shouldComponentUpdate(){
console.log("Count---shouleComponentUpdate");
return true
//如果是false， 就不再往下走了
}
//派生的狀態：不是從state得到，是從props得到
//此方法適用于罕見的用例，即 state 的值在任何時候都取決于 props, 可以使用此方法，但也可以完全不使用，即從地球上消失，沒有作用
static getDerivedStateFromProps(props,state){
console.log("getDerivedStateFromProps",props,state);
//this.setState({count:props.count})
// return props
return null
}
//組件更新完畢
componentDidUpdate(preProps,preState,snapShot){
console.log("Count---componentDidUpdate",preProps,preState,snapShot);
}
//getSnapshotBeforeUpdate (信息狀態在更新之前來個快照)
//同樣，此用法很不常見
getSnapshotBeforeUpdate(){
console.log("更新快照","getSnapshotBeforeUpate");
//快照值： 任何值都可以做為快照值 字符串，數組，對象
return "莊子" //想傳什么就傳什么，傳給componentDidUpdate
}
render(){
console.log("Count---render");
return (
<div>
<h1>當前的統計總數為: {this.state.count}</h1>
<button onClick={this.add}>點擊+1</button>
<button onClick={this.die}>卸載組件</button>
<button onClick={this.force}>不更改任何狀態值，強制更新一下</button>
</div>
)
}
add = ()=>{
const {count} = this.state
this.setState({count:count+1})
}
//卸載組件按鈕的回調
die = ()=>{
ReactDOM.unmountComponentAtNode(document.getElementById("test"))
}
force = ()=>{
this.forceUpdate();
}
}
//ReactDOM.render(<Count count = {10}/>,document.getElementById("test"))
const e = React.createElement;
const domContainer = document.querySelector('#test');
const root = ReactDOM.createRoot(domContainer);
root.render(e(Count));1. 初始化階段： 由ReactDOM.render()觸發--初次渲染
1. constructor()
2. componentWillMount
3. render()
4. componentDidMount() =====> 常用
一般在這個鉤子中做一些初始化的事， 例如：開啟定時器，發送網絡請求，訂閱信息
2. 更新階段： 由組件內部this.setState()或父組件render觸發
1. shouldComponentUpdate()
2. componentWillUpdate()
3. render() =====> 必須使用的一個
4. componentDidUpdate()
3. 卸載組件： 由ReactDOM.unmountComponentAtNode()觸發
1. componentWillUnmount() ===> 常用
一般在這個鉤子中做一些收尾的事， 例如：關閉定時器，取消訂閱消息
新的生命周期：
即將廢棄：componentWillMount，componentWillUpdate()，componentWillReceiveProps
增加：
getDervedStatefrorProps(得到派生的狀態從props),
getsrapchotEeloreUpdate
(以上兩個用法極其罕見， 即使完全不會也沒有關系)
