React 踏坑指南3：
准备工作
知识准备
文件引用
文件基本结构
Hello React! 复制代码
几个mini demo
1.点击+1效果
var ClickApp = React.createClass({ getInitialState: function() { return { clickCount: 0 } }, clickHandle: function() { this.setState({ clickCount: this.state.clickCount + 1 }) }, render: function() { return ( 请点击下方按钮
{this.state.clickCount}
) } }); var ClickComponent = ReactDOM.render( 2.组件间基本嵌套
var MessageBox = React.createClass({ getInitialState: function(){ return { isVisiable: true, titleMessage: 'Hello World !' } }, render: function(){ var styleObj = { display : this.state.isVisiable ? 'block' : 'none' } return ( {this.state.titleMessage}
you are right !
) } }) var componentBox = ReactDOM.render( 3.表单&ref引用
var FormApp = React.createClass({ getInitialState: function() { return { inputValue: 'input value', selectValue: 'A', radioValue:'B', checkValues:[], textareaValue:'some text here...' } }, handleSubmit:function(e) { e.preventDefault(); console.log('form submitting...') var formData = { input: this.refs.goodInput.value, select: this.refs.goodSelect.value, textarea: this.refs.goodTextarea.value, radio: this.state.radioValue, check:this.state.checkValues } console.log('#####') console.log(formData) //this.refs.goodRadio.saySomething(0) //通过refs引用目标组建后，就可以调用子组件的方法和属性 }, 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 ( 4.组件间通信
var MessageBox = React.createClass({ getInitialState: function(){ return { subMessages : [ '全能骑士', '死灵法师', '敌法师', '影魔', '冰龙' ], } }, render: function(){ return ( ) } }); var Submessage = React.createClass({ propTypes: { messages: React.PropTypes.array.isRequired }, getDefaultProps: function(){ return { messages:['通道阻塞，默认召唤小黑'] } }, render:function() { var msgs = []; this.props.messages.forEach(function(msg, index) { msgs.push( 召唤 第{index+1}位英雄: {msg}
) }) return ( {msgs} ) } }) var componentBox = ReactDOM.render( 5.组件间双向通信
var MixinsTest = React.createClass({ mixins: [React.addons.LinkedStateMixin], getInitialState: function(){ return { message: '我帅吗？', isTrue: true } }, render: function() { return ( {this.state.message}
你怎么认为？{this.state.isTrue? '那当然':'拉倒吧'}
这个是个子组件哦
// 相当于执行SubSubComp messageLink={this.props.messageLink} likeLink={this.props.likeLink} /> 你想说什么呢
) } }); var componentBox = React.render( 生命周期
var MessageBox = React.createClass({ getDefaultProps:function(){ console.log('getDefaultProps'); return {}; }, getInitialState:function(){ console.log('getInitialState'); return { count: 0, } }, componentWillMount:function(){ console.log('componentWillMount'); /* var self = this; this.timer = setInterval(function(){ self.setState({ count: self.state.count + 1, }) },1000);*/ }, componentDidMount:function(){ console.log('componentDidMount') }, componentWillUnmount: function(){ alert('you are tring to kill me !! ') /*clearInterval(this.timer);*/ }, shouldComponentUpdate:function(nextProp,nextState){ console.log('shouldComponentUpdate'); if(nextState.count > 10) return false; return true; }, componentWillUpdate:function(nextProp,nextState){ console.log('componentWillUpdate'); }, componentDidUpdate:function(){ console.log('componentDidUpdate'); }, killMySelf: function(){ React.unmountComponentAtNode( document.getElementById('example') ); }, doUpdate:function(){ this.setState({ count: this.state.count + 1, }); }, render:function(){ console.log('渲染') return ( 计数： {this.state.count}
) } }); var Submessage = React.createClass({ componentWillReceiveProps:function(nextProp){ console.log('子组件将要获得prop'); }, shouldComponentUpdate:function(nextProp,nextState){ if(nextProp.count> 5) return false; return true; }, render:function(){ return ( 当前计数是：{this.props.count}
) } }); var messageBox = React.render(