【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.父组件、子组件之间的值传递

 

posted @ 2017-07-16 21:19  乘客  阅读(468)  评论(0)    收藏  举报