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 (
{this.state.name }
)
}
}
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 (
{this.state.list.map(item => - {item}
)}
)
}
// 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 (
{this.state.text}
{ this.state.list.map((item,index)=>- {item.name}
)}
)
}
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 (
{this.state.text}
{ this.state.list.map((item,index)=>- {item.name}
)}
)
}
//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 (
{this.props.text}
{this.state.title}
)
}
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 (
{this.state.text}
)
}
}
3. 销毁阶段
componentWillUnmount: 在删除组件之前进行清理操作，比如计时器和事件监听器
import React, { Component } from 'react'
export default class app extends Component {
state = {
show: true
}
render() {
console.log('render2')
return (
{this.state.show &&