【react】慕课网视频学习笔记
1.JSX:语法糖,对语言的功能并没有影响,但更方便程序员使用,增强可读性。
2.jsFiddle:前端在线调试工具
3.为什么要把this额外声明成_self变量,因为window.setTimeout中的函数内部this指向的是global对象,所以需要在之前保存this变量。
也可以利用apply、call、bind修改this指向。
var Hello = React.createClass({ getInitialState: function () { return { opacity: 1.0 }; }, componentDidMount: function () { this.timer = setInterval(function () { var opacity = this.state.opacity; opacity -= .05; if (opacity < 0.1) { opacity = 1.0; } this.setState({ opacity: opacity }); }.bind(this), 100); }, render: function () { return ( <div style={{opacity: this.state.opacity}}> Hello {this.props.name} </div> ); } }); ReactDOM.render( <Hello name="world"/>, document.body );
4.实现按钮、输入框的联动
ref属性,找DOM节点时,用refs
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>菜鸟教程 React 实例</title> <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> </head> <body> <div id="container"></div> <script type="text/babel"> var TestClickComponent = React.createClass({ handleClick:function(event){ var tipE = ReactDOM.findDOMNode(this.refs.tip); if(tipE.style.display === "none"){ tipE.style.display = "inline"; }else{ tipE.style.display = "none"; } event.stopPropagation(); event.preventDefault(); }, render:function(){ return ( <div> <button onClick={this.handleClick}>显示|隐藏</button><span ref="tip">测试点击</span> </div> ); } }); var TestInputComponent = React.createClass({ getInitialState:function(){ return { inputContent : "" } }, handletextInput:function(event){ this.setState({ inputContent:event.target.value }); }, render:function(){ return ( <div> <input type="text" onChange={this.handletextInput} /><span>{this.state.inputContent}</span> </div> ); } }); ReactDOM.render( <div> <TestClickComponent /> <TestInputComponent /> </div> ,document.getElementById("container")) </script> </body> </html>
5.父组件、子组件之间的值传递