React学习笔记-4-什么是生命周期

标签：组合   判断   之间   初始化   状态机   不同的   决定   传递   事件   

1. 什么是声明周期？
   组件本质上就是状态机，输入确定，输出一定确定。如何理解这一点？react有两个特点，第一个就是去除了所有的手动dom操作，也就是使用jsx。第二个就是组件把状态和结果一一对应起来，从而能够直观的看出来，程序在不同的状态是的输出。属性是由父组件传递给子组件的，状态是子组件内部维护的一些数据，当状态发生变化时候，组件也会进行更新，因此我们可以理解成一个state对应一个render的结果，这样我们就可以知道在不同的state下，组件会render出什么样的结果，从而就知道组件在页面上展示的内容是什么。状态机本质上就是状态和转移的结合，我们刚才说过，不同的状态对应不同的输出，状态和状态之间有时候会发生转换，当状态发生转变的时候，会触发不同的钩子函数，从而让开发者有机会做出相应，因为状态转换是由react来进行维护的。作为开发者没有 办法直接的参与到状态转换中，但是react给我们提供了很多钩子函数，我们可以自己来编写这些钩子函数，这样react在进行状态转换的时候，就可以调用我们的状态函数。
   
   我们也可以用事件的思路来理解状态，开发者不知道什么时候会发生事件，但是我们可以决定在发生事件的时候，执行什么动作，也就是事件的监听器，状态和事件有一些类似，他们的区别是事件和事件之间没有直接的关系，每个事件都是独立发生的，但是状态和状态之间是有关系的，组件可以处于不同的状态中，那么组件所有的状态组合起来，就构成了组件的声明周期。
   
   
   
2. 组件的生命周期有哪些部分？
   初始化阶段：用我们编写的组件代码来生成组件的实例，组件代码就是我们写的class，就像面向对象中的类一样，class是不会真正的被使用的，我们真正使用的是class初始化出来的实例。举个例子，假设我们有一个HelloWorld组件，那么我们在页面的两个地方使用了HelloWorld，这两个地方渲染出来的是两个实例，实例和实例之间是不同的，但是他们都来自同一个组件，也就是他们是使用同一个组件初始化出来的，在初始化阶段，组件会进行一些初始的状态设置，以及渲染，也就是render，在初始化完成之后，实例就会真正的显示在页面上，以被用户使用。
   
   初始化结束以后，就进入了运行中，对于实例来说，绝大部分时间都处于运行中，运行中实例的状态可能发生改变，从而触发一系列的钩子函数，最终这些改变可能导致组件被重新渲染，注意这里我们说的是可能导致，有一些改变可能并不会导致组件被重新渲染，只是内部的状态发生了变动
   
   
   
3. 最后就是销毁阶段。不使用组件的时候，就会被销毁
   
   
   这三者发生的时间是不固定的，需要根据页面来进行判断，这三个阶段只是在逻辑上对组件进行了分类，实际上我们在编写代码的时候，关注的是钩子函数以及他们的用法。
   
   
4. 不同的声明周期可以自定义的函数
   初始化阶段：
                  getDefaultProps:获取实例的默认属性，这个只会在组件的第一个被初始化的时候被调用，也就是说从第二个组件开始，只会调用其他的。同一个组件所有的实                                        例，他们拿到的默认属性都是一样的。
                  getInitialState：获取实例的初始化状态
                  componentWillMount：组件即将被装载，也就是组件即将被渲染到页面上。注意在这个阶段，组件还没有真正的被渲染
                  render：组价在render函数中生成虚拟的dom节点，也就是jsx，最后由react把虚拟的dom节点渲染称为真正的dom节点，并放到页面中，让用户可以看到，                                        并且进行交互
                  componentDidMount：这个函数和第三个函数的区别will变成到了did也就是说他是在组件被装载之后调用的，这个函数被调用的时候，组件已经被渲染到了                                          页面中
   运行中：
               
                  componentWillReceiveProps:组件将要接收到属性的时候调用，如果组件的属性发生变化，比如说父组件改变了组件的属性，那么组件就需要进行更新，准确的说是组件可能要进行更新，这个函数是在接收到属性之前触发的，属性在被传送给组件之前，开发者有机会去处理这样的属性，比如说修改属性，更新一些内部的状态等等，这里属性还是没有被传送个组件，
                  shouldComponentUpdate:当组件接收到新属性或者新状态的时候，就会触发这个函数，从名字上来看，这个函数是一个疑问句，他说的是组件是否要更新，显然我们可以告诉他组件不需要更新。既然react会帮助我们判断组件是否要更新，那么我们为什么还要去手动进行判断呢？因为有的时候状态或者属性的变化，并不会导致组件发生更新，如果组件不需要更新我们可以直接在这步直接返回false，这样的话，react就不会直接调用render函数，从而可以提高性能，如果我们不进行这样的操作，那么即使render返回的结果一样，react也需要经过render以及diff算法来判断组件是否需要更新，如果我们在这步直接返回false，那么react就不要在进行这两步操作，从而可以提高性能，
                  componentWillUpdate:他会在render触发之前调用这时候我们是已经处于运行中，需要的是更新操作，而不是装载操作。
                  render:和我们初始化的render是一样的。
                  componentDidUpdate:会在render结束之后，真正的dom被创建完毕后被调用。
   
   销毁阶段：componentWillUnmount:这个函数会在销毁真正被执行之前被调用，给开发者一些真正的机会来进行一些清理的操作。
   
   

React学习笔记-4-什么是生命周期

标签：组合   判断   之间   初始化   状态机   不同的   决定   传递   事件   

原文地址：http://www.cnblogs.com/Gabriel-Wei/p/6104313.html