react生命周期（自己的方式理解）
react生命周期（自己的方式理解）
react的生命周期函数有：挂载，渲染/更新，卸载
首先要知道react生命周期最初始的要有哪些？最后生命中出现的又有哪些？我本人喜欢把react比作是一个人的一生，这样就很容易理解react生命周期了。挂载（出生），渲染/更新（成家/再婚），卸载（死亡）。联想记忆学习法是我最喜欢的学习方法，首先不要抽象要具体，不要理性要感性。毕竟十个IT男，九个是直男，不太浪漫，但是在熟人面前绝对够浪！哈哈哈！
我一个艺术出身的学生，如果不是迫于生活的淫威之下，或许我就不兼职IT男了，呜呜！！！
好了，废话不多说，直接上干货！
咱们先看一下，react最开始是有哪些？然后生命周期又有哪些？
一步一步来，先上图
首先，react中，组件中必不可少的一个函数就是Render。你想想，你这辈子，如果刚挣钱了，最大的愿望不就是：买买买嘛！就是要嘚瑟，就是要让别人知道，你说是吧！这就是new money和old money的区别。
好了，一个人的生命里面，那么我们孩子要出生了，那我们就在react里面初始化。这就是constructor及this.state里初始化函数，为什么要this.state呢？类似于孩子生下来，你要做DNA检查孩子到底是不是你自己的一样。（哈哈哈！别打我，我今天就是想搞笑的把react讲一下），紧接着就是组件挂载了，componentWillDount，你可以理解为，孩子要上户口要起一个名字了。然后render要解析渲染了，可以理解为孩子可以完全是一个合法公民了。最后componentDidMoun就是要在这个环境里面进行孩子这辈子所要经历的很多事情了。
1，组件将要挂载时候要触发的函数：componentWillMount（将要出生）
2，组件完成时触发的函数：componentDidMount（完全是个合法公民）
3，是否要更新数据是触发的函数：shouldComponentUpdate（是否要谈恋爱）
4，将要更新数据时候触发的函数：componentWillUpdate（将要谈恋爱）
5，数据更新完成时触发的函数：componentDidUpdate（谈完恋爱后结婚）
6，组件将要销毁时候触发的函数：componentWillUnmount（这辈子走完了）
好了，先上个代码。
import React,{Component} form 'react'class Smzq extends Component{constructor(props){console.log('01构造函数')super(props)this.state={}}
//组件将要挂载时触发的生命周期
componentWillMount(){console.log('04组件将要挂在')
}
//组建完成时出发的生命周期函数
componentDidMount(){console.log ('03组件将要挂在')
}
render(){console.long('03数据渲染render')return(<div>生命周期函数演示</div>)
}
}
export default Smzq
接下来，我们来聊聊，生命周期更新的部分。可以理解为一个人是否要进行恋爱，以及谈恋爱，再后来的结婚。
shouldComponentUpdate就是确认数据是否要更新，你要不要结婚。当然啦，这个要函数返回一个true的时候才会进行更新，就好比你要经过对方同意一样，不然你就是在骚扰别人了。然后呢，对方也对你有那个意思，你们就要进行componentWillUpdate将要更新数据。（将要进行谈恋爱、将要进行结婚）。然后数据发生改变了，那么要进行render从新渲染。这个道理很简单，就是说，你以前是单身狗大家都知道的，现在你有女朋友/男朋友了，你肯定要让别人对你进行祝福啊。然后就是componentDidUpdate数据更新完成。恋人关系或者是爱人关系让大家知道。
import React,{Component} from 'react'
class Smzq extends Component{constructor(props){this.state={msg:'我是一个msg数据函数'}
}
//是否需要更新数据，如果返回true才会更新数据
shouldComponentUpdate(nextProps,nextStates){console.log('01是否要更新数据')console.log(nextProps)//父组件传给子组件的值，这里没有会显示空console.log(nextStates)//数据更新后的值return true;//返回true，确认更新
}
//确认数据是否要更新
shouldComponentUpdate(){console.log('02组件将要更新')
}
//将要更新数据的时候触发
componentWillUpdate(){console.log('03组件将要更新')
}
//更新数据的时候触发
componentDidUpdate(){console.log ('05组件更新完成')
}
//更新数据
setMsg(){this.setState({msg:'我是改变后的msg数据'})
}
render(){console.log('04数据渲染render')return(<div>{this.state.msg}<br/><hr/><button onClick={()=>this.setMsg()}> 更新msg的数据</button> </div>)}
}
export default Smzq
对了，componentWillMount()、将要干嘛和componentDidUpdate已经干了不仅仅是指恋爱，结婚，你生命中所有的美好都可以走这个。（当然，不美好的也要走！呜呜呜）让我想起了《左耳》里面那句话：爱对了是爱情，爱错了是青春。
只是很多很多年以后你在自己兄弟面前开玩笑的时候会说：从前我把生命献给了爱情，但是爱情要了我半条命，最后我没死成，青春替我抵了命！
那接下来，说说销毁阶段。就是一个人临死前把今生所有的回忆进行销毁，（可以这么理解）好了，直接上代码；
componentWillUnmount组件将要销毁时的函数
在父组件中定义一个flag为true的状态值，添加一个按钮声明一个onClick事件去
更改这个flag实现销毁组件。
父组件代码：
import React, { Component } from 'react'
import Smzq from './components/Smzq'
class App extends Component {constructor(props) {super(props)this.state = {flag: true,title: "我是APP组件的标题"}}//创建/销毁组件setFlag() {this.setState({flag: !this.state.flag})}//改变titlesetTitle() {this.setState({title: '我是app组件改变后的title'})}render() {return (<div className="APP">{this.state.flag?<Smzq title={this.setState.title}/>:''}<button>挂在/销毁生命周期</button><button>改变App组建的生命周期</button></div>)}
}
export default App
这个就是自己的身体，剩下的子组件就是自己的回忆（灵魂）
class Smzq extends Component{constructor(props){this.state={msg:'我是一个msg数据'}}//组件将要挂在时候触发发生命周期componentWillMount(){console.log('02组件将要挂在')}//组件挂载完成时触发的生命周期componentDidMount(){//Dom操作，请求数据放在这个里面console.log('04组件加载完毕')}//是否要更新数据，如果返回true才会更新数据shouldComponentUpdate(){console.log('01是否要更新数据')console.log(nextProps)//父组件给子组件的值，这里没有会显示空console.log(nextState)//数据更新后的值return true; //返回true，确认更新}//将要更新数据的时候触发的生命周期componentWillUpdate(){console.log('02组件将要更新')}//更新数据时触发的生命周期componentDidMount(){console.log('04组件更新完成')}//你在父组件里面改变props传值时候触发的函数componentWillReceiveProps(){console.log('父子组件传值，父组件里面改变了props的值触发的方法')}setMsg(){this.setState({msg:'我是改变后的msg数据'})//组件将要销毁的时候触发的生命周期函数，用在组件销毁的时候操作this.componentWillUnmount(){console.log('组件销毁了')}}render(){console.log('03数据渲染reder')return(<div>生命周期函数演示--{this.state.msg}--{this.props.title}<br/><hr/><button onClick={()=>this.setMsg()}>更新msg的数据v</button></div>)}
}
export default Smzq
点击挂载/销毁生命周期函数组件这个按钮的时候
子组件消失（记忆清除：喝了孟婆汤了）
那么我们来具体谈谈react中使用到的一些组件啦，方法啦，事件啦等等。对了，react中心思想就是组件化思想。
就像C语言：对象思想一样
React 中 keys 的作用是什么？
Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。就好比你的身份证，能追踪你在任何地方用身份证干嘛了，嘻嘻！我污了。好吧，我承认
react的状态(state)和属性(props)之间有何不同？
props 是组件对外的接口，state 是组件对内的接口。组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件的props属性进行传递，因此props是组件对外的接口。组件除了使用上层组件传递的数据外，自身也可能需要维护管理数据，这就是组件对内的接口state。根据对外接口props 和对内接口state，组件计算出对应界面的UI。
主要区别：
State是可变的，是一组用于反映组件UI变化的状态集合；
而Props对于使用它的组件来说，是只读的，要想修改Props，只能通过该组件的父组件修改。
在组件状态上移的场景中，父组件正是通过子组件的Props, 传递给子组件其所需要的状态。
（这个props你可以理解为花钱的地方，state就是你要用钱的地方，props除了会花钱意外，还会理财，就是说你props理财的时候你也要用到state）UI界面展示的就是别人看到的状态。
好了，今天就到这吧，写不下去了，
React中发起网络请求应该在哪个生命周期中进行？为什么？
对于同步的状态改变，是可以放在componentWillMount，对于异步的，最好好放在componentDidMount。但如果此时有若干细节需要处理，比如你的组件需要渲染子组件，而且子组件取决于父组件的某个属性，那么在子组件的componentDidMount中进行处理会有问题：因为此时父组件中对应的属性可能还没有完整获取，因此就让其在子组件的componentDidUpdate中处理。
至于为什么，先看看react的生命周期：
constructor(初始化) —> componentWillMount(将要干嘛) —> render(表现出来) -----> componentDidMount(已经把事情干了)
上面这些方法的调用是有次序的，由上而下，也就是当说如果你要获取外部数据并加载到组件上，只能在组件"已经"挂载到真实的网页上才能作这事情，其它情况你是加载不到组件的。
constructor被调用是在组件准备要挂载的最一开始，所以此时组件尚未挂载到网页上。
constructor()中获取数据的话，如果时间太长，或者出错，组件就渲染不出来，你整个页面都没法渲染了。（这个要注意，孩子在母亲怀中太久，要么是哪吒，要么就。。。）
componentWillMount方法的调用在constructor之后，在render之前，在这方法里的代码调用setState方法不会触发重渲染，所以它一般不会用来作加载数据之用，它也很少被使用到。（可以这么理解，某人想要或者将要做某件事，基本上不会被别人发觉，除非表现太明显了）
componentDidMount方法中的代码，是在组件已经完全挂载到网页上才会调用被执行，所以可以保证数据的加载。此外，在这方法中调用setState方法，会触发重渲染。所以，官方设计这个方法就是用来加载外部数据用的，或处理其他的副作用代码(这个就是我要做什么事情，已经确定我做了)
componentDidMount()中能保证你的组件已经正确渲染。
一般的从后台(服务器)获取的数据，都会与组件上要用的数据加载有关，所以都在componentDidMount方法里面作。虽然与组件上的数据无关的加载，也可以在constructor里做，但constructor是做组件state初绐化工作，并不是设计来作加载数据这工作的，所以所有有副作用的代码都会集中在componentDidMount方法里。（这个很好理解，你在干某件事情的时候，你来不及时间想它的后果）
总结下：
1.跟服务器端渲染（同构）有关系，如果在componentWillMount里面获取数据，fetch data会执行两次，一次在服务器端一次在客户端。在componentDidMount中可以解决这个问题。（要做某件事情，一个是彼，一个是己。所有要同构（相互间）的时候回执行俩次）
2.在componentWillMount中fetch data，数据一定在render后才能到达，如果你忘记了设置初始状态，用户体验不好。（你最好不要上来就强吻女生/男生，除非你够有种！）
3.react16.0以后，componentWillMount可能会被执行多次。（将要做的事情有很多呀！）
我们应当将AJAX 请求放到 componentDidMount 函数中执行，主要原因有下：
1.React 下一代调和算法 Fiber 会通过开始或停止渲染的方式优化应用性能，其会影响到 componentWillMount 的触发次数。对componenТWillMount 这个生命周期函数的调用次数会变得不确定，React 可能会多次频繁调用 componentWillMount。如果我们将 AJAX 请求放到 componentWillMount 函数中，那么显而易见其会被触发多次，自然也就不是好的选择。（一个人来来回回的钓着一个人的感情的话，肯定是渣男/渣女）
2.如果我们将 AJAX 请求放置在生命周期的其他函数中，我们并不能保证请求仅在组件挂载完毕后才会要求响应。如果我们的数据请求在组件挂载之前就完成，并且调用了setState函数将数据添加到组件状态中，对于未挂载的组件则会报错。而在 componentDidMount 函数中进行 AJAX 请求则能有效避免这个问题。（你把事情都做了，那还来得及打退堂鼓？你都跟对方发生关系了：建立连接了，你现在说不想要了，你觉得合适吗？）
在componentDidMount()函数中发送ajax请求，拿到数据，通过setState()保存在state中，供给组件使用。当组件要卸载时，componentWillUnmount()函数中，通过this.serverRequest.abort();将还没有完成的ajax请求停止。（将要结束一段感情，也要经过一段时间或事情来酝酿和铺垫的，所有的离开都是蓄谋已久的。都是把失望攒到极点才爆发的）
1、Где находится магазин？
[各界 拿伙几嚓 马嘎刃]？
哪里有商店？2、Как пройти (проехать) к магазину？ [嘎可 普拉一极[普拉也哈其]可 马嘎刃努]？
到商店怎么走？3、Открыт ли уже(закрыт ли ещё) магазин？[阿特可雷特 里 乌热[萨可雷特 里 亦肖]马嘎刃]？
商店已经开门了（已关门了）吗？
4、Можно показать это пальто (эти брюки, этот костюм…)?
[毛日那 八嘎萨其 艾达把利多[艾及不流给 艾达特 嘎斯旧木]]可以看看这件大衣（这件西服……）吗？
5、Можно примерить эти чёрные туфли (кожаное пальто)?[毛日那 普里灭力气 埃及 瞧勒内也 度夫里[果热那也 把利朵]]
可以试试这双黑皮鞋（皮大衣……）吗？
6、Сколько стоит эта кукла (этот фотоаппарат, эти часы…)？[丝过里嘎 丝多一特 艾大 古柯拉[艾大特 发达阿扒拉特，埃及 恰塞…]]？这个洋娃娃（这部照相机，这块表…）多少钱？7、Скажите，где гостиница？[斯嘎热 rei接，各界 嘎斯吉尼嚓]？
请问，哪里有旅馆？8、Как пройти (проехать) к гостинице？[嘎可 普拉一极[普拉也哈其]可 嘎斯吉尼才]？
到旅馆怎么走（乘车去）？
9、У вас есть свободные номера？[乌 瓦斯 也丝其 死瓦波特内也 拿灭辣]?你们这儿有空房吗?10、Скажите, пожалуйста, где здесь можно поесть (позавтракть，
пообедать，поужинать)？
[斯嘎热 rei接，各界 日接西 毛日那 拔 也丝其[把萨夫特拉嘎其，把啊别打气，把乌热那其]]？
请问，这里什么地方可以吃饭（吃早饭,吃午饭,吃晚饭）？
11、Скажите，где ресторан (кофе、столовая)？
[斯嘎热接，各界 列斯打拉[咖啡、斯打罗瓦呀]]？
请问，餐馆（咖啡厅、小食部）在哪里？
12、Девушка! (офциант!) [接乌什嘎,(阿非册阿特)]！
服务员！
13、Что вам нужно(надо)?( Что вы хотите?)
[师多 瓦母 怒日那[拿打][师多 瓦母 哈基结]？
你要什么？
14、Я возьму чай(кофе). [丫 瓦日木 恰一[果飞]]。
我要茶(咖啡)。15、Скольско с меня?[丝果里嘎 丝 灭尼阿]
付多少钱?
16、Где находится ближайший автомат?
[各界 那活几嚓 波里热一时 阿夫大麻特]？
附近哪里有自动电话？17、Где здесь телефон? [各界 日接西 节烈方恩]？这里哪里有电话？18、Можно позвонить у (от) вас ?[毛日那 把日瓦尼其 乌[哦特]瓦斯]？可以借（从）您这儿打个电话吗？19、Алло!(Да!)[阿罗[打]]！喂！
20、Попросите, пожалуйста, к телефону Юру (Игоря…).[巴普拉西接，把热额斯打，可 节烈方恩 尤鲁[伊格尔……]]。
对不起，请叫尤拉（伊格尔……）听电话。21、Пожалуйста，Антона.[把热额斯打，安东那]。请叫一下安东。22、Нельзя ли передать ему (ей) несколько слов?[涅利丝呀 里 别列打其 夜幕[业已]涅丝嘎里嘎 斯罗夫]？能否给他（她）传个话？23、Это говорит Антон(Ма Ли).[艾达嘎瓦里特 安东[马力]]我是安东（马立）24、Вам кого(Кого вам надо)? [瓦木 嘎沃[嘎沃 瓦木 那打]]？您找谁？25、А кто у телефона? [啊 可多 乌 节烈佛那]？
您是那一位？26、Подождите,сейчас позову.[把打日季节，写一恰似 把萨乌]请等一下，就去叫。27、Где находится ближайшая почта?[各界 那火几嚓 波里热一沙呀 波其达]？最近的邮局在哪里？28、Я хотел бы купить конверты и марки， Сколько с меня?[丫 哈接额 被 古闭气 刚恩为了代 一 马勒给，丝过里嘎斯灭尼亚]？我要买信封和邮票。多少钱？
29、Сколько стоит марка для письма в Китай?[丝过里嘎 丝多一特 马尔给 得尼亚 比西马 夫 给打衣]？寄往中国的信邮票要少钱？
30、Дайте мне конверт с маркой.[打衣接 木涅 刚恩为了特 斯 马尔嘎一]。给我一张带邮票的信封。
31、Где находится почтовый ящик?
[各界 那火几嚓 八旗多唯 呀西可]？邮箱在哪里？
32、Где находится отдел посылок?
[各界 那火几嚓 阿接了 把塞拉克]？包裹间在哪里？
33、Я хотел отпровить посылку.
[丫 哈接了 阿特普拉尾气 把塞了古]？我想寄邮包。
34、Будьте добры,где можно обменять инвалюту?[布吉节 打不雷，各界 毛日那 阿不灭尼亚其 因瓦流度]？劳驾，哪里可以兑换外币？
35、Где контора банка?
[各界 刚恩多拉 帮嘎]？银行代办处在哪里？
36、Я хотел обменять свои деньги на доллары (жэньминьби,
рубли).
[丫 哈接了 阿不灭尼亚其 斯瓦衣 杰尼给 那 多拉雷[人民币，卢布里]我想把自己的钱换成美元（人民币，卢布）37、 Скажите, пожалуйста, где находится больница?
[斯嘎热接，把热了斯打 各界 那火几嚓 把里尼嚓]？
请问，医院在哪里？38、Скажите, пожалуйста, где находится регистратура?
[斯嘎热接，把热了斯打 各界 那火几擦 列给死特拉毒辣]
请问，挂号室在哪里？39、Вызовите, пожалуйста, врача. [维萨为接，把热了斯打 乌拉恰]。请叫医生。40、Что с вами? [什多 斯 瓦米]？
您哪儿不舒服？
41、У меня болит горло（ухо，желудок，голова ，живот，
поясница ，грудь，нога，рука).[乌 灭尼亚 把里特 过了拉[屋哈，热卢打克，嘎拉瓦，热沃特，波压私尼嚓，格鲁吉，拿嘎，鲁嘎]]。我嗓子（耳朵、胃、头、腹部、腰、胸、脚、手）疼。42、Как пройти в аптеку? [嘎可 普拉一极 瓦扑接骨]？去药房怎么走？43、Сколько стоит это лекарство?[丝过里嘎 丝多一特 艾大 列嘎了丝特瓦]？这药多少钱？44、Как принимать это лекарство? Натощак?
После еды?
[嘎可 普里尼马其 艾达 列嘎了死特瓦 那打夏克？波斯列 也代]？
怎样服这种药？空肚子吃？饭后服？45、Можно.Спасибо! [毛日那。丝把洗吧]！好的。谢谢！46、— Давайте познакомимся ‚меня зовут Лю Хай ‚ я
работаю в буровой компании.
(达瓦衣节 吧兹拿过米木下 灭尼阿杂物特刘海 压 拉报答油无不拉我已嘎穆巴拟议 )请认识一下，我叫刘海，我在钻井公司上班。
47— Очень рад с вами познакомиться‚ меня зовут Юрий
Николаевич.
（哦且你 拉特 丝 袜米 八字哪国米擦，灭尼阿 杂物特 尤里 尼嘎拉耶维奇）
很高兴和你认识，我叫尤里 尼古拉耶维奇。
48— Кем вы работаете?
（该姆 维 拉包大爷节）
你从事什麽工作？
49—Я инженер‚работаю в компании каротажа.
（亚 硬热聂二，拉报答优 抚 嘎穆巴拟议 旮旯大日阿）我是工程师，在测井公司上班。
50、— Знакомьтесь‚мой коллега Чжоу Сяопин.
（自那过目解析 贸易 嘎列嘎 周晓平）认识一下，这是我的同事周晓平。
51— Рад вас видеть‚Александр.
（拉特 瓦斯 慰藉器 阿列克桑的了）见到你很高兴，我叫亚历山大。
52— Очень приятно.
（哦且你 普利亚特纳）
很高兴认识你。
53— Вы здесь давно?
（维 字节细 大雾诺）
你来这很长时间了吧？
54— Нет‚ 5 дней назад
（聂特 比阿器 的聂已 拿咋特）
不，才 5 天。
55— Вы курите?
（为 鼓励节）
你抽烟不？Спасибо, не курю.
（四巴西把 聂 鼓六/涅特）
谢谢，我不抽/不。
react生命周期（自己的方式理解）相关推荐
- React生命周期理解
前言 如果将React的生命周期比喻成一只蚂蚁爬过一根吊绳,那么这只蚂蚁从绳头爬到绳尾,就会依次触动不同的卡片挂钩.在React每一个生命周期中,也有类似卡片挂钩的存在,我们把它称之为'钩子函数'.那 ...
- react生命周期详细介绍
目录 挂载:在组件实例被创建并插入到dom中时,生命周期调用顺序如下 constructor componentWillMount getDerivedStateFromProps render co ...
- React生命周期讲解
React生命周期图解 先上图 其实总结就是 进入当前页面,,然后渲染页面,加载数据,渲染demo,数据更新,组件卸载 constructor /* * constructor 其实是Es6 里面带的 ...
- 前端React教程第二课 React生命周期设计思想
02 为什么 React 16 要更改组件的生命周期?(上) React 生命周期已经是一个老生常谈的话题了,几乎没有哪一门 React 入门教材会省略对组件生命周期的介绍.然而,入门教材在设计上往往 ...
- 浅谈 React 生命周期
浅谈 React 生命周期 浅谈 React 生命周期 旧版的生命周期 新版的生命周期 详解各个生命周期函数 constructor getDerivedStateFromProps render c ...
- react生命周期_React生命周期事件
react生命周期 React class components can have hooks for several lifecycle events. React类组件可以具有多个生命周期事件的挂 ...
- react生命周期整理
react生命周期 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gHhFLoVI-1647932009614)(/Users/sans/Desktop/生命周期.pn ...
- React生命周期(包含新旧流程图对比)
React生命周期 文章目录 React生命周期 对于生命周期的理解 重要的生命周期勾子 废弃的勾子 生命周期流程图(旧) 生命周期流程图(新) React 16.8以后的生命周期分为三个阶段,分别是 ...
- 深入react技术栈(5):React生命周期
我是歌谣 放弃很容易 但是坚持一定很酷 微信搜一搜前端小歌谣 React生命周期 挂载和卸载过程 组件得挂载 组件得卸载 数据更新过程 整体流程 文章参考深入学习React技术栈
最新文章
- android手机没电怎么恢复电量,手机电池不耐用怎么恢复_华为手机电池不耐用怎么恢复_攻略...
- 深度 | 带领国产数据库走向世界，POLARDB底层逻辑是什么？
- 如何将hive查询结果导出成txt文件
- 【超人】社区二手小程序v6.15.2+前端
- 烟花程序c语言,C语言烟花程序
- 下载输入python之小说下载器version2.0
- 背包九讲 ----- 01背包问题模版
- python画柱状图-Python绘制柱状图
- guid会重复么_饿了么请你考虑一下消费者
- java 删除目录下所有文件_Java删除文件、目录及目录下所有文件的方法实例
- 王道考研计算机网络笔记目录
- 本地微信公众号授权登录获取code步骤
- 归纳法、演绎法、数学归纳法之间的关系
- Last packet sent to the server was 2 ms ago 解决办法
- 安全检查监理项目部材料清单
- Heuristic Search之Greedy Best First Search
- 配置zsh的prompt
- 使用数据库进行用户身份认证
- 常用操作系统扫描工具介绍（转）
- 打造爆款时怎么做淘宝付费推广？