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

巴特西

【react】慕课网视频学习笔记

最新文章

热门文章