React学习

Posted 2020-09-18

// 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：子组件通过父组件传来的数据，子组件通过属性来访问该数据，从而是的子组件能读取父组件的属性从而做一些渲染操作