React学习笔记(持续更新--最新到2015/11/25)
React ensures that all events behave identically in IE8 and above by implementing a synthetic event system
2015/10/22
1.React的组件名首字母要大写，来区分普通变量
2.render函数中return的dom
1）return中的dom结构最外层一定是单节点
2）每个dom(无论单双节点)一定要有结束符/
3）自定义的react类引用的时候既可以用单节点也可以用双节点，关键在是否传值
4)class是js的保留字，这里要改写为className，同理还有for是htmlFor
5）{}表示是js代码段
3.props和state
1）props一般表示是不易变的属性，从父类传到子类中来
2）this.props.children表示的是组件内嵌的文本或节点，我估计也可以内嵌react组件（不过一般不这样写）
用this.props.children.length的时候要注意，如果只是hello，length=5 not 1，但是如果是dom就正常计算了。
3）相比props，state用来保存组件的当前状态,是动态的，组件私有的。并且他的变化会引起重新render
4)state中表示了一种控制组件状态的最小属性集合，所以不可以包含可以计算出的属性
4.es6+react和普通写法的不同点
有两个，来源是http://facebook.github.io/react/docs/reusable-components.html#es6-classes
1）没有getInitialState函数了，直接在constructor中给this.state赋值
2）propTypes and defaultProps(props的验证和默认值也不在class中写了，在class外部赋值)
我测试的结果是： defaultProps在ES6是其作用的，propTypes是不起作用的
此外还要注意的是： (2015/11/18)
1)对于this来说, With React, every method is automatically bound to its component instance (except when using ES6 class syntax). Methods follow the same semantics as regular ES6 classes, meaning that they don't automatically bind this to the instance. You'll have to explicitly use .bind(this) or arrow functions =>
2)about ES6--Unfortunately ES6 launched without any mixin support. Therefore, there is no support for mixins when you use React with ES6 classes. Instead, we're working on making it easier to support such use cases without resorting to mixins. ES6不支持插件所以也不用看了，我觉得，react之后会把插件做成本身的API来支持ES6的。
5.setState会重新render
setState过后会改变render但是并不会马上render，(不保证同步)，他要把整个函数内的逻辑都跑完才可以决定怎么render,比如父组件和子组件都需要render的情况下，也许父组件render后就不用子组件再render了。
2015/10/26
6.react组件table和json数据结构是有关系的
考虑到table有表头和内容，如果用来过滤用，你不能用map，你要新建立新的不定长数组，json要写成数组，而不是对象，这样难度小一点。
7.refs
refs用于获取dom结构中的相关属性，作用类似于id
js: this.refs.inStockOnlyInput.value
input: ref="inStockOnlyInput"
refs还可以配合findDOMNode()
var hereP = React.findDOMNode(this.refs.hereP);
console.log(hereP.innerHTML);
每一个挂载的React组件有一个getDOMNode()方法，你可以调用这个方法来获取对该节点的引用
this.refs.myTextInput.getDOMNode().focus();
Refs are a great way to send a message to a particular child instance in a way that would be inconvenient to do via streaming Reactive props and state. They should, however, not be your go-to abstraction for flowing data through your application. By default, use the Reactive data flow and save refs for use cases that are inherently non-reactive.如下是几个优点：
1.this.refs.myTypeahead.reset()或者focus()
2.this.refs.myInput.getDOMNode() 获取input元素的底层 DOM 节点。 Refs 是做这件事唯一可靠的方式
3.Refs是被自动管理的！如果某个子级实例被销毁了，它的 ref 也会自动销毁。不用考虑内存问题
8.react中写三目运算符要注意,最好以？：分三段写，不然编译时可能报错(2015/11/25:这条是错的，再看看)
9.jsx文件中变量可以直接赋值dom结构
2015/10/27
10.jsx中的一些dom相关属性写法
1）.在dom属性中写js---用{}
var person = <Person name={window.isLoggedIn ? window.name : ''} />
2）.在dom中写bool属性---with attributes like disabled, required, checked and readOnly.
<input type="button" disabled={true} />
3）.注释---{/* */}
4）.注意style的写法style=,详细原因如下：
//2015/11/13
内联样式在jsx的写法：
var myStyle = {
width:"200px",
height:"200px"
};
//JSX
var e = <div style="{myStyle}"></div>;
注意1 - 对应样式名称的字段，需要使用驼峰式命名，比如：border-radius样式需要使用borderRadius来访问，而background-image 样式需要使用backgroundImage来访问。
注意2 - 样式名称中的供应商前缀，除ms外都需要大写首字母对于供应商前缀（-webkit, -moz, -o, -ms），除了ms，其他都需要将首字母大写。 比如：-webkit-transition应当通过WebkitTransition来访问，然而-ms-transition 则需要通过msTransition来访问。
5)When specifying a pixel value for your inline style prop, React automatically appends the string "px" for you after your number value,
6).if-else statements don't work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction.
你可以用三目运算符在{}中代替，也可以在return外面写if-else( outside of your JSX )
11.jsx中的Spread Attributes写法
属性省略
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;
You can use this multiple times or combine it with other attributes. The specification order is important. Later attributes override previous ones.(属性覆盖)
var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'
You can use JSX spread attributes to merge the old props with additional values:
<Component {...this.props} more="values"/>
props传递的PATTERN和ANTI-PATTERN模式
组件如下：
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
Hello world!
</FancyCheckbox>
render写法：
render: function() {
var { checked, ...other } = this.props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
return (
<div {...other} className={fancyClass} />
);
}
// `other` contains { onClick: console.log } but not the checked property
这样向子组件传递就不会传checked了
如果你全都要传给子组件，就不要写下面这行
var { checked, ...other } = this.props;
写成这样的模式
<div {...this.props} className={fancyClass} />
12.jsx中HTML的实体字符写法
实体字符转义不了，有两种绕过的方法
//数组
<div>{['First ', <span>·</span>, ' Second']}</div>
//最后的方法
<div dangerouslySetInnerHTML= />
13.jsx中dom不支持自定义属性，如果要自定义，加上data-或者aria-
2015/11/13
14.react表单输入--注意
1）文本输入框--不要使用value属性设置文本输入框元素的初值，应当使用defaultValue
<input type="text" defaultvalue="demo">
2）复选按钮--要使用checked属性设置复选按钮的初始选中状态，应当使用defaultChecked
<input type="checkbox" defaultchecked="">
3）单选按钮组--不要使用option元素的selected属性设置单选按钮组的初始选中状态，应当使用 select元素的defaultValue
<select defaultvalue="A">
<option value="A"> China</option>
<option value="B"> India</option>
<option value="C"> Japan</option>
</select>
关于表单，因为react的表单和传统html表单展现方式不一样（尤其是对于value的设置，react是js，要state驱动，html则不用），所以目前我个人不建议表单做成react组件，知道react成熟为止再考虑
input value={null}的时候是可以编辑的，但是我还没有找到合适的运用场景，待。
2015/11/18
15.react事件
1）react用的是事件委派
2）As of v0.14, returning false from an event handler will no longer stop event propagation. Instead, e.stopPropagation() or e.preventDefault() should be triggered manually, as appropriate.
3)To register an event handler for the capture phase, append Capture to the event name; for example, instead of using onClick, you would use onClickCapture to handle the click event in the capture phase.
16.key
对于key的作用我现在认识还不深，没有看到非有他不可的地方，继续学习。
1)一般在重复子项上添加key（例如，在ui的li中）。务必把key添加到子级数组里组件本身上，而不是每个子级内部最外层 HTML 上