React --- 生命周期
Posted So istes immer
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React --- 生命周期相关的知识，希望对你有一定的参考价值。
1.案例演示
需求：
①让指定文本做显示/隐藏的渐变动画
②从完全可见到彻底消失，耗时2s
③点击按钮卸载组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta>
<title></title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class Love extends React.Component
state = opacity:1
death = () =>
// 卸载组件
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
//组件挂载完毕
componentDidMount()
this.timer = setInterval(() =>
let opacity = this.state //获取原状态
opacity -= 0.1 //减小0.1
if(opacity <= 0) opacity = 1
this.setState(opacity) //设置新的透明度
, 200);
//组件将要卸载
componentWillUnmount()
clearInterval(this.timer) // 清除定时器
//初始化渲染、状态更新之后触发render
render()
console.log('render')
return(
<div>
<h2 style=opacity:this.state.opacity>所以爱会消失吗？</h2>
<button onClick=this.death>会</button>
</div>
)
ReactDOM.render(<Love/>, document.getElementById('test'))
</script>
</body>
</html>2.生命周期函数理解
组件从创建到死亡会经历一些特定的阶段
React组件中包含一系列hook函数(钩子函数、生命周期回调函数) ，会在特定时刻调用
我们在定义组件时，会在特定的hook函数中，做特定的工作
3.生命周期(旧)
1.初始化阶段
constructor() => componentWillMount() => render() => componnetDidMount()
2.更新阶段:由组件内部this.setState()或父组件render触发
shouldComponentUpdate() => componentWillUpdate() => render() => componentDidUpdate()
3.卸载组件: 由ReactDOM.unmountComponentAtNode()触发
componentWillUnmount()
①组件挂载
//其它代码同上
<script type="text/babel">
class Count extends React.Component
//构造器
constructor(props)
console.log('Count-constrcuctor')
super(props)
//初始化状态
this.state = count:0
//加1按钮的回调
add = () =>
const count = this.state
this.setState(count:count+1)
//卸载组件按钮的回调
death = () =>
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
//组件将要挂载的钩子
componentWillMount()
console.log('Count-componentWillMount')
//组件挂载完毕的钩子
componentDidMount()
console.log('Count-componentDidMount')
//组件将要卸载的钩子
componentWillUnmount()
console.log('Count-componentWillUnmount')
render()
console.log('Count-render')
const count = this.state
return(
<div>
<h2>当前求和为：count</h2>
<button onClick=this.add>点我+1</button>
<button onClick=this.death>卸载</button>
</div>
)
ReactDOM.render(<Count/>, document.getElementById('test'))
</script>刷新之后，控制台输出
Count-constrcuctor
Count-componentWillMount
Count-render
Count-componentDidMount②组件更新
<script type="text/babel">
class Count extends React.Component
//构造器
constructor(props)
console.log('Count-constrcuctor')
super(props)
//初始化状态
this.state = count:0
//加1按钮的回调
add = () =>
const count = this.state
this.setState(count:count+1)
//卸载组件按钮的回调
death = () =>
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
//组件将要卸载的钩子
componentWillUnmount()
console.log('Count-componentWillUnmount')
//控制组件更新的"阀门"
shouldComponentUpdate()
console.log('Count-shouldComponentUpdate')
return true
//组件将要更新的钩子
componentWillUpdate()
console.log('Count-componentWillUpdate')
//组件更新完毕的钩子
componentDidUpdate()
console.log('Count-componentDidUpdate')
render()
console.log('Count-render')
const count = this.state
return(
<div>
<h2>当前求和为：count</h2>
<button onClick=this.add>点我+1</button>
<button onClick=this.death>卸载</button>
</div>
)
ReactDOM.render(<Count/>, document.getElementById('test'))
</script>点击“点我+1”按钮，控制台输出如下
Count-shouldComponentUpdate
Count-componentWillUpdate
Count-render
Count-componentDidUpdate③强制刷新页面，不更新状态state，可以去调this.forceUpdate()
④componentWillReceiveProps钩子函数
父组件在render的时候，传给子组件一些数据，子组件在props中拿到这些数据，并且这些数据更新的时候，会调用componentWillReceiveProps钩子函数，像下图这样往下走
//其它代码同上
<script type="text/babel">
class A extends React.Component
state = verse:'我本将心照明月'
changeVerse = () =>
this.setState(verse: '奈何明月照沟渠')
render()
return(
<div>
<div>A组件</div>
<button onClick=this.changeVerse>下一句</button>
<B verse=this.state.verse/>
</div>
)
class B extends React.Component
//组件将要接收新的props的钩子，第一次渲染组件不调用
componentWillReceiveProps()
console.log('componentWillReceiveProps')
//控制组件更新的"阀门"
shouldComponentUpdate()
console.log('Count-shouldComponentUpdate')
return true
//组件将要更新的钩子
componentWillUpdate()
console.log('Count-componentWillUpdate')
//组件更新完毕的钩子
componentDidUpdate()
console.log('Count-componentDidUpdate')
render()
return(
<div>B组件:this.props.verse</div>
)
ReactDOM.render(<A/>, document.getElementById('test'))
</script>
4.生命周期(新)
以上是关于React --- 生命周期的主要内容，如果未能解决你的问题，请参考以下文章