zoukankan      html  css  js  c++  java
  • React ---- 浅谈ReactJs

    1、Hello  React 简单组件搭建。

    var HelloReact = React.createClass({

      render: function() {

        return (

          <div>Hello React!</div>

        )

      }

    });

    ReactDOM.render(

      <HelloReact />,

      document.querySelector('body');

    )

    2、React 生命周期(初始化、更新和销毁);

    1. getDefaultProps  // 创建组建props
    2. getInitalState  // 实例化状态
    3. componentWillMount // 挂载前
    4. componentDidMount // 挂载后
    5. componentWillReceiveProps // 属性被改变时
    6. shouldComponentUpdate // 是否跟新
    7. componentWillUpdate // 更新前
    8. componentDidUpdate // 更新后
    9. componentWillUnmount  // 销毁前

    3、React 数据初始化,而React为我们提供了两种方式来向组件传递数据,即 props 和 state。

    // props 传递

      var  HelloReact = React.createClass({

        getDefaultProps: function() {

          return {

            data: "  "

          }

        },

        render: function() {

          return (

            <div>

              {this.props.data}

            </div>

          )

        }

      })

      ReactDOM.render(

        <HelloReact  data={" Hello React! "} />,

        document.querySelector("body")

      )

    // state 不通过外部传递

      var HelloReact = React.createClass({

        getInitialState:function() { return data: "  " },

        componentDidMount:function() { this.requestData(); },

        requestData: function() {
          $.ajax({

            url: " http://www.baidu.com ",

            data: {},

            success: function(data) {

              this.setState({

                data: data

              })

            }

          }.bind(this));

        },

        render: function() {

          return (

            <div>

              { this.state.data }

            </div>

          )

        }

      });

      React.render(

        <HelloReact  />,

        document.querySelector("body");

      )

  • 相关阅读:
    Java设计模式(Design Patterns)
    P2213 [USACO14MAR]懒惰的牛The Lazy Cow_Sliver
    P3120 [USACO15FEB]牛跳房子(金)Cow Hopscotch (Gold)
    P4818 [USACO15DEC]Bessie's Dream 贝西的梦
    P3667 [USACO17OPEN]Bovine Genomics
    P4379 [USACO18OPEN]Lemonade Line
    P4378 [USACO18OPEN]Out of Sorts S
    P4089 [USACO17DEC]The Bovine Shuffle
    P4269 [USACO18FEB]Snow Boots G
    P4086 [USACO17DEC]My Cow Ate My Homework
  • 原文地址:https://www.cnblogs.com/GongYaLei/p/7787715.html
Copyright © 2011-2022 走看看