首页 > 代码库 > React学习

React学习

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