React生命周期

学习react已经有一段时间了 

当然这里说的是用react来编写页面

而不是有服务器有后端的那种react-native

总结下react开发：

知识储备：

1.react核心思想：虚拟DOM 

react关乎的是数据 而不是样式 所以其主要在于绑定每个组件的数据

而页面中最耗时的是DOM操作 js代码执行的速度远大于js操作DOM的速度

所以react开发了虚拟DOM

根据事先定义好的虚拟DOM绑定数据

然后在将虚拟DOM渲染到页面中 

一旦一个组件的数据发生变化 将重新渲染该组件

从而达到了急速渲染的目的

经过一段时间的验证 react无论是DOMReady的时间还是操作DOM的时间 都是很快的

2.render方法

在react中每个组件都有大量的js代码 这些代码往往对应组件可能会残生变化对应的操作

而在页面中显示的样式 往往应该放在render方法中

每个react组件都是对应的一个类 每个类都应该有一个render方法

该方法返回该组件对应的代码片段 也可以返回一个空值 但是要有render方法

可以理解为render方法是每个组件经过操作后最后输出的DOM结果

3.state和props

状态state和参数props都是react中很重要的参数 在编写中也会经常用到

不同的是

state描述的是组件的自身的状态 state值可以是可变的 

一旦state值发生变化 该组件将重新渲染

props描述的是父组件传递给子组件的参数 最多可传递到孙组件

props的值一旦传递 是不可更改的 一般用于初始化组件

例如：

<HelloWord text=“Aus” />

上面例子中的text属性就是props

可以通过 this.props.text获取到该值

这个值是父组件传递给子组件的 不可更改

但是可以添加新的props

react组件的生命周期

可以看到 一个react组件从渲染到页面到销毁的生命周期分为3部分

1.mounted 挂载

2.update 更新

3.unmounted 移除

mounted：指的是react挂载虚拟dom

update：指的是更改组件的状态 重新渲染组件

unmounted：指的是销毁该组件的状态

我们在页面看到的组件都停留在update阶段的render中

当state变化 页面需要重新渲染的时候 进入到update阶段的render中

react提供了每个阶段前后都有hook函数 方便我们需要的时候调用

react每个阶段提供的函数：

getDefaultProps()

React 支持以声明式的方式来定义 props 的默认值。

该方法返回一个对象

var ComponentWithDefaultProps = React.createClass({  getDefaultProps: function() {    return {      value: 'default value'    };  }  /* ... */});

getInitialState()

初始化组件的状态 这个一般组件都有 用来定义该组件有哪些state以及state的初始值为什么

该方法返回一个对象

getInitialState: function () {        return {            imgsArrangeArr:[            ]        };    }

挂载：componentWillMount()

在初始化渲染执行之前立刻调用。如果在这个方法内调用setState，render() 将会感知到更新后的 state，将会执行仅一次，尽管 state 改变了。

挂载：componentDidMount()

在初始化渲染执行之后立刻调用一次，在生命周期中的这个时间点，组件拥有一个 DOM 展现，你可以通过 this.getDOMNode() 来获取相应 DOM 节点。

如果想和其它 JavaScript 框架集成，使用 setTimeout 或者 setInterval 来设置定时器，或者发送 AJAX 请求，可以在该方法中执行这些操作。

更新： componentWillReceiveProps(objectnextProps)

该函数需要一个对象作为参数 该对象是新的props

用此函数可以作为 react 在 prop 传入之后， render() 渲染之前更新 state 的机会。老的 props 可以通过 this.props 获取到。在该函数中调用 this.setState() 将不会引起第二次渲染。

更新： shouldComponentUpdate(objectnextProps,objectnextState)

在接收到新的 props 或者 state，将要渲染之前调用。该方法在初始化渲染的时候不会调用，在使用 forceUpdate 方法的时候也不会。

如果确定新的 props 和 state 不会导致组件更新，则此处应该 返回 false。

如果该处返回false则将不会进行重新render

只有返回true的时候会进行重新render

更新： componentWillUpdate(objectnextProps,objectnextState)

在接收到新的 props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。

使用该方法做一些更新之前的准备工作。

更新： componentDidUpdate(objectprevProps,objectprevState)

在组件的更新已经同步到 DOM 中之后立刻被调用。该方法不会在初始化渲染的时候调用。

使用该方法可以在组件更新之后操作 DOM 元素。

移除： componentWillUnmount()

在组件移除之后执行

一般执行一些cleartInterval等操作 清理一些不必要的任务 

最后React官方说明生命周期的文档：http://reactjs.cn/react/docs/component-specs.html