首页 > 其他 > 详细

React学习

时间:2017-05-18 10:57:28      阅读:339      评论:0      收藏:0      [点我收藏+]

// 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学习

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!