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