react点滴

1.<SubSubComp {...this.props } /> 传递属性，{...props}的方式为组件传递了这两个属性，这就是JSX中的延展属性，"..."成为延展操作符，这种方式可以很方便地为组件指定多个属性  http://blog.csdn.net/yubo_725/article/details/50531817

2.mixin那里我真的没有看懂哈。

3.

<script type="text/jsx">
		var FormApp = React.createClass({
			　　getInitialState:function(){
				　　　　return {
					　　　　　　inputValue: 'input value',
					　　　　　　selectValue: 'A',
					　　　　　　radioValue:'B',
					　　　　　　checkValues:[],
					　　　　　　textareaValue:'some text here,,,'
				　　　　}
			},
			　　handleSubmit:function(e){
				　　e.preventDefault();
				　　var formData = {
					　　input: this.refs.goodInput.getDOMNode().value,
					　　select: this.refs.goodSelect.getDOMNode().value,
					　　textarea: this.refs.goodTextarea.getDOMNode().value,
					　　radio: this.state.radioValue,
					　　check: this.state.checkValues,
				}
				　　console.log('the form result is:')
				　　console.log(formData);
				　　this.refs.goodRadio.saySomething();
			},
			　　handleRadio:function(e){
				　　　　this.setState({
					　　　　　　radioValue: e.target.value,
				　　})
			},
			handleCheck:function(e){
				　　var checkValues = this.state.checkValues.slice();
				　　var newVal = e.target.value;
				　　var index = checkValues.indexOf(newVal);
				　　if( index == -1 ){
					　　　　checkValues.push( newVal )
				　　}else{
					　　checkValues.splice(index,1);
				}
				　　this.setState({
					　　　　checkValues: checkValues,
				　　})
			},
			render: function(){
				　　return (
					　　<form onSubmit={this.handleSubmit}>
						　　<input ref="goodInput" type="text" defaultValue={this.state.inputValue }/>
						　　<!-- 这里的ref还可以这样写哈 function(comp){React.findDOMNode(comp).focus()} -->
						　　<br/>
						　　选项：
						　　<select defaultValue={ this.state.selectValue } ref="goodSelect">
							　　<option value="A">A</option>
							　　<option value="B">B</option>
							　　<option value="C">C</option>
							　　<option value="D">D</option>
							　　<option value="E">E</option>
						　　</select>
						　　<br/>
						　　<p>radio button!</p>
						　　<RadioButtons ref="goodRadio" handleRadio={this.handleRadio} />
						　　<br/>

						　　<Checkboxes handleCheck={this.handleCheck} />
						　　<br/>
						　　<textarea defaultValue={this.state.textareaValue} ref="goodTextarea"></textarea>
						　　<button type="submit">提交</button>
					</form>
				)
			}
		});

		var RadioButtons = React.createClass({
			　　saySomething:function(){
				　　　　alert("yo what's up man!");
			　　},
			render:function(){
				　　return (
					　　　　<span>
						　　　　A
						　　　　<input onChange={this.props.handleRadio} name="goodRadio" type="radio" value="A"/>
						　　　　B
						　　　　<input onChange={this.props.handleRadio} name="goodRadio" type="radio" defaultChecked value="B"/>
						　　　　C
						　　　　<input onChange={this.props.handleRadio} name="goodRadio" type="radio" value="C"/>
					　　　　</span>
				　　)
			　　}
		});
		var Checkboxes = React.createClass({
			　　　　render: function(){
				　　　　　　return (
					　　　　　　<span>
						　　　　　　A
						　　　　　　<input onChange={this.props.handleCheck}  name="goodCheckbox" type="checkbox" value="A"/>
						　　　　　　B
						　　　　　　<input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="B" />
						　　　　　　C
						　　　　　　f<input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="C" />
					　　　　</span>)
			}
		})

		var formApp = React.render(
			　　　　<FormApp />,
			　　　　document.getElementById('app')
		)

	</script>

4.minxins的双向数据绑定。

<script type="text/jsx">
		var EasyForm = React.createClass({
			mixins: [ React.addons.LinkedStateMixin ],
			getInitialState:function(){
				return {
					message: 'react is awesome!',
					isReactAwesome: true,
				}
			},
			render:function(){
				return (
					<div>
						<h1>我想说： {this.state.message}</h1>
						<h2>React是不是很好用？ {this.state.isReactAwesome?'非常好用！':'一般般。。。'}</h2>
						<input type="text" valueLink={this.linkState('message')} />
						<br/>
						<input type="checkbox" checkedLink={this.linkState('isReactAwesome') } />
						<br/>
						<SubComp messageLink={ this.linkState('message') } likeLink={this.linkState('isReactAwesome')} />

					</div>
				)
			}
		});

		var SubComp = React.createClass({
			render:function(){
				return (
					<div>
						<h3>这是个子组件哦</h3>
						<SubSubComp {...this.props } />
					</div>
				)
			}
		});

		var SubSubComp = React.createClass({
			render:function(){
				return (
					<div>
						<p>你想说什么？</p>
						<input type="text" valueLink={ this.props.messageLink } />
						<p>你稀罕React么？</p>
						<input type="checkbox" checkedLink = {this.props.likeLink } />
					</div>
				)
			}
		})

		React.render( <EasyForm />, document.getElementById('app') );

	</script>

4.生命周期的函数：

getInitialState

getDefaultProps

componentWillMount

componentDidMount

componentWillUnmount

killMySelf

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

doUpdate