react-生命周期

生命周期-核心

一 引出生命周期

需要理解的概念有：

• React生命周期的版本

• React新旧生命周期的主要内容大体印象

• 生命周期钩子函数

• 一定执行的生命周期钩子函数

  render生命周期钩子函数的必须调用与执行1次

1.render生命周期钩子函数的必须调用与执行1次

	<div id="test"></div>
	<script type="text/babel">
		class Demo extends React.Component {
			// 不写render钩子函数将报错
			// render钩子函数必定会先执行1次
			render() {
				console.log('---render---') //初始阶段执行一次
				return (
					<div>
						<h2>分手了，怎么办？</h2>
						<button>不活了</button>
					</div>
				)
			}
		}
		ReactDOM.render(<Demo />, document.getElementById('test'))
	</script>

2.render生命周期钩子函数的重复执行（注意死循环，设备性能卡顿）

不断产生新的定时器对象，又没有被清除，造成内存的大量占用，性能卡顿（利用软媒系统雷达软件可以检测系统情况）

	<div id="test"></div>
	<script type="text/babel">
		//如何才能实现组件的更新？
    	//1 修改state，那么就会再次执行render
		class Demo extends React.Component {
			state = { opacity: 1 } //初始化状态
			render() {
				console.log('---render---')
				//从state中获取透明度
				const { opacity } = this.state
                //定时器操作
				setInterval(() => {
					let { opacity } = this.state
					opacity -= 0.1
					if (opacity <= 0) opacity = 1//边界处理
					this.setState({ opacity })
				}, 2000)
				return (
					<div>
						<h2 style={
  { opacity }}>分手了，怎么办？</h2>
						<button>不活了</button>
					</div>
				)
			}
		}
		ReactDOM.render(<Demo />, document.getElementById('test'))
	</script>

二 完成透明度变化案例

需要理解的概念有：

1 如何解决只设置一个定时器对象

​ 放到componentDidMount里，完成组件的挂载

2 如何将定时器对象挂载到组件实例对象上

​ 在componentDidMount里开启定时器

3 如何清除定时器

​ 利用按钮点击事件触发清除定时器与销毁组件

4 在什么阶段进行定时器对象的清除

​ 可以将清除定时器操作前移至将销毁阶段，在组件将要卸载componentWillUnmount()

1.利用挂载完成阶段实现一次性设置定时器操作

	<div id="test"></div>
	<script type="text/babel">
		class Demo extends React.Component {
			state = { opacity: 1 } //初始化状态
			render() {
				console.log('---render---')
				//从state中获取透明度
				const { opacity } = this.state
				return (
					<div>
						<h2 style={
  { opacity }}>分手了，怎么办？</h2>
						<button>不活了</button>
					</div>
				)
			}
			//组件完成挂载 ---- 只是在组件挂载完毕后执行一次
			componentDidMount() {
				console.log('---componentDidMount---') //一次
				//开启定时器，更新透明度
				setInterval(() => {
					let { opacity } = this.state //获取原来的透明度
					opacity -= 0.1 //透明度减小
					if (opacity <= 0) opacity = 1 //重置透明度
					this.setState({ opacity }) //更新state
				}, 200);
			}
		}
		ReactDOM.render(<Demo />, document.getElementById('test'))
	</script>

2.利用按钮点击事件触发清除定时器与销毁组件

	<div id="test"></div>
	<script type="text/babel">
		class Demo extends React.Component {
			state = { opacity: 1 } //初始化状态
			render() {
				console.log('---render---')
				//从state中获取透明度
				const { opacity } = this.state
				return (
					<div>
						<h2 style={
  { opacity }}>分手了，怎么办？</h2>
						<button onClick={this.death}>不活了</button>
					</div>
				)
			}
			//组件完成挂载 ---- 只是在组件挂载完毕后执行一次 钩子函数
			componentDidMount() {
				console.log('---componentDidMount---')
				//将定时器挂载到实例对象上 let timer = null在此处不可取
				this.timer = setInterval(() => {
					let { opacity } = this.state //获取原来的透明度
					opacity -= 0.1 //透明度减小
					if (opacity <= 0) opacity = 1 //重置透明度
					this.setState({ opacity }) //更新state
				}, 200);
			}
			//“不活了”按钮的回调函数
			death = () => {
				clearInterval(this.timer) //定时器清除
                let timer = null
				//卸载组件 
				ReactDOM.unmountComponentAtNode(document.getElementById('test'))
                console.log(this)  Demo组件实例
			}
		}
		ReactDOM.render(<Demo />, document.getElementById('test'))
	</script>

3.可以将清除定时器操作前移至将销毁阶段

	<div id="test"></div>
	<script type="text/babel">
		class Demo extends React.Component {
			state = { opacity: 1 } //初始化状态
			render() {
				console.log('---render---')
				//从state中获取透明度
				const { opacity } = this.state
				return (
					<div>
						<h2 style={
  { opacity }}>分手了，怎么办？</h2>
						<button onClick={this.death}>不活了</button>
					</div>
				)
			}
			//组件完成挂载 ---- 只是在组件挂载完毕后执行一次
			componentDidMount() {
				console.log('---componentDidMount---')
				//开启定时器，更新透明度
				this.timer = setInterval(() => {
					let { opacity } = this.state //获取原来的透明度
					opacity -= 0.1 //透明度减小
					if (opacity <= 0) opacity = 1 //重置透明度
					this.setState({ opacity }) //更新state
				}, 200);
			}
			//组件将要卸载 ---- 只是在组件将要卸载时执行一次
			componentWillUnmount() {
				console.log('---componentWillUnmount---')
				clearInterval(this.timer)
			}
			//“不活了”按钮的回调
			death = () => {
				//卸载组件
				ReactDOM.unmountComponentAtNode(document.getElementById('test'))
			}
		}
		ReactDOM.render(<Demo />, document.getElementById('test'))
	</script>

三 分析生命周期-挂载流程

需要理解的概念有：

• 挂载流程的生命周期钩子函数主要有几个 4个
• 每个钩子函数的执行次数为多少次 render执行1+n次，其他都是1次
• 生命周期钩子函数在程序里的顺序是否会影响触发的顺序 不会

	<div id="test"></div>
	<script type="text/babe