React 踏坑指南3：

准备工作

知识准备

Reactjs 踏坑指南1：一些概念
Reactjs 踏坑指南2： JSX&&组件

文件引用

引用文件

文件基本结构

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Hello React!</title><script src="react.js"></script><script src='react-with-addons.js'></script><script src="react-dom.min.js"></script><script src="browser.min.js"></script></head><body><div id="example"></div><script type="text/babel">//这里放下面案例中的内容</script></body>
</html>
复制代码

几个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 (<div><h2>请点击下方按钮</h2><button onClick={this.clickHandle}>Click me</button><p>{this.state.clickCount}</p></div>)}});var ClickComponent = ReactDOM.render(<ClickApp />,document.getElementById('example'))
复制代码

2.组件间基本嵌套

  var MessageBox = React.createClass({getInitialState: function(){return {isVisiable: true,titleMessage: 'Hello World !'}},render: function(){var styleObj = {display : this.state.isVisiable ? 'block' : 'none'}return (<div><h1 style={styleObj}>{this.state.titleMessage}</h1><Submessage/></div>)}});var Submessage = React.createClass({render:function() {return (<h3>you are right !</h3>)}  })var componentBox = ReactDOM.render(<MessageBox />,document.getElementById('example'),function(){})
复制代码

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 (<form onSubmit={this.handleSubmit}><input ref="goodInput" type="text" defaultValue={this.state.inputValue}/><input ref={function(comp){ReactDOM.findDOMNode(comp).focus()}} type="text" defaultValue={this.state.inputValue}/><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><RadioButton ref='goodRadio' handleRadio={this.handleRadio}/><br/><p>checkbox</p><CheckBoxs handleCheck={this.handleCheck}/><br/><textarea defaultValue={this.state.textareaValue} ref='goodTextarea'></textarea><br/><button type="submit">提交</button></form>)}});var RadioButton = React.createClass({saySomething:function(){alert('whats your name')},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 CheckBoxs = React.createClass({render:function(){return (<span><input onChange={this.props.handleCheck}  name="goodCheckbox" type="checkbox" value="A" /><input onChange={this.props.handleCheck}  name="goodCheckbox" type="checkbox" value="B" /><input onChange={this.props.handleCheck}  name="goodCheckbox" type="checkbox" value="C" /></span>)}})var FormComponent = ReactDOM.render(<FormApp />,document.getElementById('example'))
复制代码

4.组件间通信

  var MessageBox = React.createClass({getInitialState: function(){return {subMessages : ['全能骑士','死灵法师','敌法师','影魔','冰龙'],}},render: function(){return (<div><Submessage messages={this.state.subMessages}/></div>)}});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(<p key={index}>召唤 第{index+1}位英雄: {msg}</p>)})return (<div>{msgs}</div>)}  })var componentBox = ReactDOM.render(<MessageBox />,document.getElementById('example'),function(){})
复制代码

5.组件间双向通信

  var MixinsTest = React.createClass({mixins: [React.addons.LinkedStateMixin],getInitialState: function(){return {message: '我帅吗？',isTrue: true}},render: function() {return (<div><h2>{this.state.message}</h2><h2>你怎么认为？{this.state.isTrue? '那当然':'拉倒吧'}</h2><input type="text" valueLink={this.linkState('message')}/><br/><input type="checkbox" checkedLink={this.linkState('isTrue')}/><SubComp messageLink={this.linkState('message')} likeLink={this.linkState('isTrue')} /></div>)}});var SubComp = React.createClass({render:function(){return (<div><h3>这个是个子组件哦</h3>// 相当于执行SubSubComp messageLink={this.props.messageLink} likeLink={this.props.likeLink} /><SubSubComp {...this.props} /></div>)}});var SubSubComp = React.createClass({render:function(){return (<div><p>你想说什么呢</p><input type="text" valueLink={this.props.messageLink}/><br/><input type="checkbox" checkedLink={this.props.likeLink} /></div>)}});var componentBox = React.render(<MixinsTest />,document.getElementById('example'))
复制代码

生命周期

    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 ( <div><h1 > 计数： {this.state.count}</h1> <button onClick={this.killMySelf}>卸载掉这个组件</button><button onClick={this.doUpdate}>手动更新一下组件（包括子组件）</button><Submessage count={this.state.count}/></div>)}});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 (<h3>当前计数是：{this.props.count}</h3>)}});var messageBox = React.render( <MessageBox/>, document.getElementById('example'))
复制代码

Reactjs 踏坑指南3：一些例子（未完成）相关推荐

Reactjs 踏坑指南1：一些概念
Reactjs 踏坑指南1: 知识点什么是React 虚拟DOM JSX 组件生命周期和状态事件单项数据流 Reactjs和Angularjs的对比 React简介 React是一个Faceb ...
最全干货：从写简历，到面试、谈薪酬的那些技巧和防坑指南
读者大大们好,好几天没更新了.一方面因为这几天工作忙,占了写作的时间.另一方面是在准备这篇文章各种素材,今年是最难求职年,我希望通过这篇文章能帮大家提高求职成功率. 这篇文章分为简历篇.面试篇.谈薪酬 ...
17条避坑指南：一份来自谷歌的数据库经验贴
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 来源 | https://medium.com/@rak ...
JWT 入坑爬坑指南
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 来源 | 公众号「程序新世界」越来越多的开发者开始学习 ...
怎么把原来的墙拆掉_电视墙避坑指南要收好！拆掉重装太心累...
电视墙是家里装修最为重要的一个地方. 相信很多人都想要把电视墙装修得简单又大气,而且还是容易搞卫生的整洁类型~但是,电视墙贴砖过程中,有很多坑需要注意,一不小心就要像下面的业主一样,拆掉重装. 业主反 ...
api 微信内置浏览器js_多端开发框架uni-app入坑指南，一套代码适用微信、头条等小程序...
前言 hello 小伙伴们,现在我已经正式入坑 uni-app 了.uni-app 已经发布好几个月了,期间也是踩坑无数,但是官方秉承着不抛弃不放弃的精神,积极解决开发者的各种简单的.复杂的问题,在此 ...
开发工具总结（2）之全面总结Android Studio2.X的填坑指南
前言:好多 Android 开发者都在说Android Studio太坑了,老是出错,导致开发进度变慢,出错了又不知道怎么办,网上去查各种解决方案五花八门,有些可以解决问题,有些就是转来转去的写的很粗 ...
hive 增加表字段语录_Hive改表结构的两个坑|避坑指南
Hive在大数据中可能是数据工程师使用的最多的组件,常见的数据仓库一般都是基于Hive搭建的,在使用Hive时候,遇到了两个奇怪的现象,今天给大家聊一下,以后遇到此类问题知道如何避坑! 坑一:改变字段 ...
ext列表禁止滑动_后台列表设计避坑指南（下）
编辑导语:列表页是后台界面的重要组成之一,上篇说了后台列表设计的"搜索"设计(详情见:后台列表设计避坑指南上):本篇继续讲剩下的两个部分的"坑"和必坑指南,我 ...

Reactjs 踏坑指南3：一些例子（未完成）

React 踏坑指南3：

准备工作

知识准备

文件引用

文件基本结构

几个mini demo

1.点击+1效果

2.组件间基本嵌套

3.表单&ref引用

4.组件间通信

5.组件间双向通信

生命周期

Reactjs 踏坑指南3：一些例子（未完成）相关推荐

最新文章

热门文章