react学习总结(一)

2018-06-24 00:43:21来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

       react框架是热门框架之一,现在通过代码学习react。

      react是JSX语法,JSX语法就是HTML语言可以直接写在javascript语言中,不加任何引号。JSX的基本语法规则就是遇到HTML标签,就用HTML规则解析,遇到代码块,就用用javascript规则解析。

        <1>ReactDOM.render()

         react最基本的方法是ReactDOM.render(),其主要作用就是将模版转化为HTML语言,并将其插入指定的DOM节点

        <2>插入数组变量

        JSX语法也允许在模版中直接插入js变量,这个变量可以数组,它会展开数组的所有成员,并且添加到模版中

         

     <3>React.createClass()

      react可以将代码封装成组件,然后将组件插入到网页中,React.createClass()就是用于生成一个组件类

     

      有几个注意的点:<1>type = "text/babel"

                                  <2>组件名称第一个字母是大写

                                  <3>每个组件都必须有render,主要是用于输出

                                   <4>组件只能包含一个顶层标签

                                   <5>组件可以添加属性

                                   <6>组件类可以通过this.props来获取组件的属性

                                   <7>class需要写成htmlClass,for需要写成htmlFor

     <4>this.props.children

           this.props可以获取组件的属性,而this.props.children获取到的是组件所有的子节点,不过要注意的是它的类型会根据子节点有多少个而不同,如果没有子节点,它的数据类型就是undefined,如果只有一个子节点,它的数据类型就是object,如果有多个子节点,它的数据类型就是array。所以可以运用React.Children.map来处理子节点,这样就不用担心它的数据类型了。

         

     <5>React.PropTypes

           组件的属性可以接收任意值,所以有的时候需要验证该属性的参数是否符合要求,React.PropTypes就是验证属性的参数是否符合要求

      

       <6>getDefaultProps

         通过getDefaultProps可以设置属性的默认值

       <7>ref

          ref是为了从组件获取真实DOM的节点,因为组件并不是真实的DOM节点,而是存在于内存中的一种数据结构,称为虚拟DOM

      <8>this.state

        可以通过this.state来访问随着与用户互动而变化的组件的特性

       

   <9>组件的生命周期

      组件的生命周期分为三部分:(1)Mounting ---- 已插入真实DOM

                                                    (2)Updating ---- 正在被重新渲染

                                                    (3)Unmounting ---- 已移除真实DOM

      React为每个状态提供了两种处理方法,will是函数在进入状态前调用,did是函数在进入状态后调用,具体方法如下:

  • componentWillMount()
  • componentDidMount()
  • componentWillUpdate(object nextProps, object nextState)
  • componentDidUpdate(object prevProps, object prevState)
  • componentWillUnmount()

          同时还提供了两种特殊处理方法

  • componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
  • shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用

           <10>Ajax

            通过使用componentDidMout方法设置ajax请求,请求到数据后通过this.setState重新渲染页面

           

    <script type="text/babel">
var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },

  componentDidMount: function() {
    $.get(this.props.source, function(result) {
      var lastGist = result[0];
      if (this.isMounted()) {
        this.setState({
          username: lastGist.owner.login,
          lastGistUrl: lastGist.html_url
        });
      }
    }.bind(this));
  },

  render: function() {
    return (
      <div>
        {this.state.username}'s last gist is <a href= {this.state.lastGistUrl} >here</a>
      </div>
    );
  }
});

ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  document.getElementById('example')
);
    </script>

 

     参考文章:http://www.ruanyifeng.com/blog/2015/03/react.html

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:vue-router2路由参数注意问题

下一篇:Queue of js