react

react的组件

分为 定义 React.createClass 和 实例化(通过 ReactDOM.render插入dom中，或者直接在其他组建定义时候调用)两步。

---

React.createClass(option)

这个option是一个对象，包括了几种属性：

• react组建的生命周期，包括最重要的render，每个都是一个函数
• 规定props的验证方式：propTypes，是一个object
• 混合: mixins，是一个对象数组，每一个对象和这个option的结构相同。
• 自己定义的一些方法，可以在其他的函数中通过this.xxx来进行调用或者传递引用。

---

jsx的含义和格式

在render属性对应的函数中，返回的值可以是一个jsx标签。这个标签：就是简单的一个React.createElement() / React.DOM.div()方法的调用而已，只是写法不一样。
形式上和xml非常类似，里面可以写普通的html元素，也可以写react元素，注意写法：

• 注意有些属性定义的时候要换一个写法
  className => class
htmlFor => for
• 事件要驼峰写法：onClick
• 属性＝后面不用家引号，引号就表示＝一个字符串
• style属性的值要写成是一个对象：style={{width: ‘20px'}}
• {}里面的内容是是表达式而不是语句，不要加分号。
• 增加了一些属性：autoFocus, valueLink

---

方法中的this

在各个方法中调用this属性可以访问到相应实例的一些属性：

• 集合：props refs state
• 方法：setState
• 自己定义的函数

---

实例的xml标签:

• 标签名字必须大写，定义它的时候也是一样。
• 标签有两种方式给它给予特定值:
  1. 一种是写作属性，注意：属性名等号后面加引号是字符串，不加引号是js变量
     <People name=“xiaoming” age=1 like=link />
  2. 一种是写在里面的子元素。子元素实际上相当于一段html字符串被使用，并且还可以被遍历
• 实例一个react元素，就是写上标签名，并且为他通过props和子节点两种方式，为他配置相应的特性。

---

props和state的区别:

props是数据源，是开发者配置给组建的特征数据
state是从props或者写死的值中获取初始值，然后通过发生事件等情况去接受改变(this.setState)，然后重新执行定义时render的函数，更新dom
所以，

从props的角度来看：

• props有默认值，这些默认值让用户对部分props 可写可不写。
• 有些props配置给组建之后，就不会再变了。
• 有些props配置给组建之后，还会继续变。所以，把这些props赋值给state。

state的角度来看：

• 不需要改变的值不用赋给state，一个组建中要改变的东西采用state来代表。
• 有些state是通过用户赋值给props以及默认的props获取初始值的：用户可写可不写。
• 有些state是不来源于props，即这些state后面会发生改变，但用户不能配置它的初始值。

---

组件的复合思路：

1. 通过了解son的propTypes中需要传入和默认的props和state的初始及变化，就知道要在parent中调用son时，需要传入的props。
   组建的复合就是把props一层一层传下去。中间可能有state来记录变化的状态。
2. son和parent的通讯，就是调用parent时将一个function作为props传入，下一层包装一下，把这个this.props.func1作为回调，以便可以控制调用的逻辑，再把包装后的函数挂为this.func2，作为下一级props的值传下去中。
   每一层都是如此，一直传到最后这一层，这个被包装的this.funcn 就赋给了最下层的事件监听器。当最下层的组建的元素发生事件时，就导致最初呗传入的func1被一层一层回调最后调用执行。