码迷,mamicode.com
首页 > 其他好文 > 详细

React学习

时间:2017-05-18 11:40:44      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:isp   读取   world   java   comm   方法   cti   ret   语法   

// tutorial1.js

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById(‘content‘)
);

转换成这种纯的JavaScript:

// tutorial1-raw.js
var CommentBox = React.createClass({displayName: ‘CommentBox‘,
  render: function() {
    return (
      React.createElement(‘div‘, {className: "commentBox"},
        "Hello, world! I am a CommentBox."
      )
    );
  }
});
ReactDOM.render(
  React.createElement(CommentBox, null),
  document.getElementById(‘content‘)
);
以上是JSX语法的本质,会将其转为js语言执行,React的本质是通过creatClass建立一个组件数,而不是真正创建一个DOM,然后通过ReacDOM.render方法传入该组件树和需要添加到的目的节点创建出真正的DOM

props:子组件通过父组件传来的数据,子组件通过属性来访问该数据,从而是的子组件能读取父组件的属性从而做一些渲染操作


React学习

标签:isp   读取   world   java   comm   方法   cti   ret   语法   

原文地址:http://www.cnblogs.com/kankanbujian/p/6871795.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!