1.初始化阶段
componetWillMount: render 之前最后一次修改状态的机会
render:只能访问 this.props 和 this.state 不允许修改状态和DOM输出
componetDidMount： 成功render并渲染完成真实DOM之后出发，可以修改dom
import React, { Component } from 'react'
export default class app extends Component {
state = {
name: "huanhuan"
}
UNSAFE_componentWillMount () {
console.log('will mount',this.state.name,document.getElementById('name'));
//第一次上树前最后一次修改状态机会
this.setState({ name: "HUANHUAN" })
//初始化数据的作用
}
componentDidMount() {
console.log('did mount',this.state.name,document.getElementById('name'));
//数据请求axios
//订阅函数调用
//setInterval
// 基于创建的完的dom进行 初始化,,,,,, BetterScroll
this.setState({ name: "HUANHUAN1" })
}
render() {
console.log('render')
return (
<div id="name">{this.state.name }</div>
)
}
}
import React, { Component } from 'react'
import BetterScroll from 'better-scroll'
export default class app extends Component {
state = {
list: [
"111","222","333","444","555","666","777","888","999","000","121","122","123","124","125"
]
}
componentWillMount() {
console.log(document.querySelectorAll("li"))
}
componentDidMount() {
new BetterScroll("#wapper")
}
render() {
console.log('render')
return (
<div id="wapper" style={{ height: "200px", background: "yellow",overflow: "hidden"}}>
<ul>
{this.state.list.map(item => <li key={item} > {item}</li>)}
</ul>
</div>
)
}
// UNSAFE_componentWillUpdate() {
// console.log('componentwillUpdate',document.getElementById('name').innerHTML);
// }
componentDidUpdate(prevProps,prevState) {
console.log('componentdidUpdate', document.getElementById('name').innerHTML);
console.log(prevProps.list)
if (prevState.list.length ===0) {
new BetterScroll("#wapper")
}
}
}
2.运行中阶段
componentWillReceiveProps: 父组件修改属性触发
shouldComponentUpdate: 返回false会组织render调用
componentwillUpdate: 不能修改属性和状态
render：只能访问this.props 和 this.state 不允许修改状态和DOM输出
compoenetDidUpdate: 可以修改DOM
import React, { Component } from 'react'
import BetterScroll from 'better-scroll'
import Axios from 'axios'
export default class app extends Component {
state = {
list: [],
text:"huanhuan"
}
componentDidMount() {
Axios.get('./test.json').then((res) => {
console.log("componentDidMount")
this.setState({list: res.data[2].list})
})
}
render() {
console.log('render')
return (
<div>
<span >{this.state.text}</span><button onClick={() => { this.setState({ "text": "HUANHUAN" }) }}>点击</button>
<div id="wapper" style={{ height: "200px", background: "yellow",overflow: "hidden"}}>
<ul>
{ this.state.list.map((item,index)=><li key={index}> {item.name}</li> )}
</ul>
</div>
</div>
)
}
componentDidUpdate(prevProps, prevState) {
console.log(prevState)
if (prevState.list.length === 0) {
new BetterScroll("#wapper")
}
}
}
import React, { Component } from 'react'
import BetterScroll from 'better-scroll'
import Axios from 'axios'
export default class app extends Component {
state = {
list: [],
text: "huanhuan",
num:0
}
componentDidMount() {
Axios.get('./test.json').then((res) => {
console.log("componentDidMount")
this.setState({list: res.data[2].list})
})
}
render() {
console.log('render')
return (
<div>
<span >{this.state.text}</span><button onClick={() => { this.setState({ "text": "xiaolong" }) }}>点击</button>
<div id="wapper" style={{ height: "200px", background: "yellow",overflow: "hidden"}}>
<ul>
{ this.state.list.map((item,index)=><li key={index}> {item.name}</li> )}
</ul>
</div>
</div>
)
}
//scu
shouldComponentUpdate(nextProps, nextState) {
if (JSON.stringify(this.state.text) !== JSON.stringify(nextState.text)) {
return true
}
return false
}
componentDidUpdate(prevProps, prevState) {
console.log(prevState)
if (prevState.list.length === 0) {
new BetterScroll("#wapper")
} else if (this.state.num == 0) {
new BetterScroll("#wapper")
}
}
}
import React, { Component } from 'react'
class Child extends Component {
state = {
title:""
}
render() {
console.log('render1')
console.log(this.state.title)
return (
<div>
{this.props.text}
{this.state.title}
</div>
)
}
componentWillReceiveProps(nextProps) {
console.log('componentWillReceiveProps', nextProps)
this.setState({title: nextProps.text+"huanhuan"})
//最先获取父组件传来的属性，可以利用属性进行ajax或者逻辑处理
//把属性转化为孩子自己的状态
}
}
export default class app extends Component {
state = {
text:'123123'
}
render() {
console.log('render2')
return (
<div>
{this.state.text}
<button onClick={() => this.setState({text:"2222"})} >点击</button>
<Child text={this.state.text}/>
</div>
)
}
}
3. 销毁阶段
componentWillUnmount: 在删除组件之前进行清理操作，比如计时器和事件监听器
import React, { Component } from 'react'
export default class app extends Component {
state = {
show: true
}
render() {
console.log('render2')
return (
<div>
<button onClick={() => this.setState({ show: false})}>点击</button>
{this.state.show && <Child />}
</div>
)
}
}
class Child extends Component {
render() {
return (
<div>
Child
</div>
)
}
componentDidMount() {
window.onresize = () => {
console.log('resize')
}
this.timer = setInterval(() => {
console.log('setInterval')
},1000)
}
componentWillUnmount() {
console.log('compomentWillUnmount')
window.onresize = null
clearInterval(this.timer)
}
}
网友评论