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的双向数据绑定。

4.生命周期的函数：

getInitialState

getDefaultProps

componentWillMount

componentDidMount

componentWillUnmount

killMySelf

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

doUpdate