React 组件的常用生命周期函数汇总

class App extends React.Component {
constructor(props) {
super(props)

// 1.初始化state
this.state = {
count: 0
}

// 2.解决事件处理程序this指向问题
this.handleClick = this.handleClick.bind(this)

console.warn(‘生命周期钩子函数：constructor’)
}
componentDidMount() {
// 1.发送ajax请求，获取远程数据
// axios.get(‘http://api….’)

// 2.进行DOM操作
const title = document.getElementById(‘title’)
console.log(title)

console.warn(‘生命周期钩子函数：componentDidMount’)
}

// 事件处理程序
handleClick() {
this.setState({
count: 1
})
}

render() {
console.warn(‘生命周期钩子函数：render’)

// 错误演示（不能调用setState()）
// this.setState({
// count: 2
// })

return (
<div>
<h1 id=’title’>统计豆豆被打的次数：{this.state.count}</h1>
<button id=’btn’ onClick={this.handleClick}>打豆豆</button>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById(‘root’))

// 父组件
class App extends React.Component {
constructor(props) {
super(props)

this.state = {
count: 0
}
}

// 事件处理程序
handleClick = () => {
// 执行时机：setState()
this.setState({
count: this.state.count + 1
})

// 执行时机：强制更新
// this.forceUpdate()
}

render() {
return (
<div>
{/* 执行时机：组件接收到新的props */}
<ShowCount count={this.state.count} />
<button onClick={this.handleClick}>打豆豆</button>
</div>
)
}
}

// 子组件
class ShowCount extends React.Component {
render() {
console.warn(‘组件ShowCount的生命周期钩子函数：render’)
return (<h1 id=’title’>统计豆豆被打的次数：{this.props.count}</h1>)
}

// 注意：如果要调用 setState() 更新状态，必须要放在一个 if 条件中
// 因为：如果直接调用 setState()，也会导致递归更新！！！
componentDidUpdate(prevProps) {
// componentDidUpdate的作用：获取DOM
const title = document.getElementById(‘title’)
console.log(title)

// 正确做法：比较更新前后的props是否相同，来决定是否重新渲染组件
console.log(‘上一次的props：’, prevProps, ‘，当前的props：’, this.props)
if (prevProps.count !== this.props.count) {
this.setState({})

// componentDidUpdate的作用：发送ajax请求数据
// axios.get(‘http://api….’)
}

// 错误演示
// this.setState({})

console.warn(‘组件ShowCount的生命周期钩子函数：componentDidUpdate’)
}
}
ReactDOM.render(<App />, document.getElementById(‘root’))

// 父组件
class App extends React.Component {
constructor(props) {
super(props)

this.state = {
count: 0
}
}

// 事件处理程序
handleClick = () => {
this.setState({
count: this.state.count + 1
})
}

render() {
return (
<div>
{
this.state.count > 5 ? <p>豆豆被打死了</p> : <ShowCount count={this.state.count} />
}
<button onClick={this.handleClick}>打豆豆</button>
</div>
)
}
}

// 子组件
class ShowCount extends React.Component {
componentDidMount() {
this.timerId = setInterval(() => {
console.log(‘定时器正在执行~’)
}, 500)
}

render() {
return (<h1 id=’title’>统计豆豆被打的次数：{this.props.count}</h1>)
}

componentWillUnmount() {
console.warn(‘组件ShowCount的生命周期钩子函数：componentWillUnmount’)

// 清理定时器
clearInterval(this.timerId)
}

}
ReactDOM.render(<App />, document.getElementById(‘root’))