1.属性和状态

1.属性props

1. 含义：props = properties
2. 属性：一个事物的性质与关系，属性往往是与生俱来的，无法自己改变的
3. 属性的两种用法：
   a). "?"中的内容可以是：字符串，对象{}，数组{[1,2,3]}，变量{var}
   b). <Demo {...props} />
   var props = { one : "123", two : "456" }
4. getDefaultProps : 设置默认属性 第一个调用

2.状态state

1. 状态 ：事务所处的状况
   状况是由食物自行处理，不断变化的。父组件与子组件都无法改变他的状态。
2. 状态的用法：
   a). getInitialState : 初始化状态
   b). setState : 更新状态

属性和状态相似点 ：

a). 都是纯js对象，使用{}创建的对象

b). 都会触发render更新

c). 都具有确定性，给定相同的属性或者相同的状态，结果是相同的

属性和状态的区分： 组件在运行时需要修改的数据就是状态，所有的数据都可以变成状态

以下是例子

//demo1 :属性的第一种写法
    
复制代码

//demo2 :属性的第二种写法
    
复制代码

3.this.props.children属性

children没有与组件的属性一一对应，表示组件的所有子节点，一般用于列表。

例子

    
复制代码

demo3运行后html会变成如下：

    
    
     
        
      
            
百度
        
        
      
            http://www.baidu.com        
    
     
    
复制代码

状态state的例子

//demo4 state
    
复制代码

小案例：本地时间的显示

//demo5
    
复制代码

2.组件的生命周期(初始化阶段)

生命周期：组件的本质是状态机，输入确定，输出一定确定。 一个state对应一个render，状态转换的时候会触发不同的函数。

生命周期的三个阶段：

1. 初始化阶段 : 设置初始的属性与状态
   a). getDefaultProps: 设置初始的属性，只在第一次调用，实例之间共享引用。
   b). getInitialState: 设置初始的状态。
   c). componentWillMount: 组件将要加载，render之前最后一次修改状态的机会。
   d). render: 只能访问this.props和this.state，只有一个顶层标签（组件），不允许修改状态和DOM输出。
   e). componentDidMount: 成功render并渲染完成真实DOM之后出发，可以修改DOM，要操作DOM也必须在这个阶段完成。

例子

//demo1
    
复制代码

效果图： 点击后会慢慢往右移动