React study(二)

目录

react 组件生命周期概要

组件本质上是状态机，输入确定，输出一定确定。
状态发生转换时会触发不同钩子函数，从而让开发者有机会作出响应。可以用事件的思路来理解状态。

react整个生命周期：

不同阶段的自定义函数

初始化：

注意：getDefaultProps(在第一个示例被初始化的时候被调用)
运行中：

销毁：

react 组件生命周期

生命周期的初始化阶段

getDefaultProps：只调用一次，实例之间共享引用
getInitialState：初始化每个实例特有的状态
componentWillMount：render之前最后一次修改状态的机会
render：只能访问this.pros和this.state,只有一个顶层组件，不允许需要改状态和DOM输出
componentDidMount：成功render并渲染完成真实DOM之后触发，可以修改DOM

生命周期的运行中阶段

componentWillReceiveProps：父组件修改属性触发，可以修改新属性、修改状态
shouldComponentUpdate：返回false会阻止render调用
componentWillUpdate：不能修改属性和状态
render：只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM输出
componentDidUpdate：可以修改DOM

生命周期的销毁阶段

componentWillUnmount：在删除组件之前进行清理操作，比如计时器和事件监听器

属性的含义和用法

属性的含义：
props=properties
属性：一个事物的性质与关系
属性往往是与生俱来的、无法自己改变的

属性三种用法：
①键值对 等号右边可以三种写法
name= “tim”、{123} 、{“123”}、{[1,2,3]}、{variable}
②父组件与子组件
var props={ one:”123”,two:”321”}
<helloworld {...props} />（调用不方便）
③ var instance=React.renser(<helloworld></helloworld>,document.body);
instance.setProps({name:"Tim"});(不建议使用，违背react原则)
###状态的含义和用法
state
状态：是无所出的状况
状态时由事物自行处理、不断变化的
getInitialState：初始化每个实例特有的状态
setState：更新组件状态

###属性和状态的对比
####相似点
都是纯JS对象、都会触发render更新、都具有确定性

注意：组件在运行时需要修改的数据就是状态

项目分析

（文章评论项目）
分析构成项目的组件：

demo下载：demo