React-组件创建的三种方式

React.createElement、ReactDOM.render、React.Component、Function

创建一个简单的react页面


<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="./style.css" rel="stylesheet">
  </head>
  <body>
    <div id="like_button_container"></div>
    <div class="like_button_container" data-commentid="3"></div>
    <!-- 加载 React。-->
    <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- 用于解析jsx的代码 babel引用应在前面 -->
    <!-- type="text/babel" 识别react代码 加载我们的 React 组件。-->
    <script type="text/babel" src="./like_button.js"></script>
  </body>
</html>

React.createElement、ReactDOM.render、React.Component

like_button.js如下：


'use strict';
// 创建一个继承React.Component的类组件
class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { num:  1};
  }
  btnclick() {
    console.log(this.state.num)
    let num = this.state.num+1
    console.log(num)
    this.setState({
      num: num
    })
  }
  render() {
    // if (this.state.liked) {
    //   return 'You liked comment number ' + this.props.commentID;
    // }
    console.log(123)
    return (
      <div>
        <h1>{this.state.num}</h1>
        <button onClick={this.btnclick.bind(this)}>点击相加</button>
      </div>
    );
  }
}
const a = React.createElement('h1', {
  onClick: () => {
    console.log('123')
  }
}, 'two')
// ReactDOM.render(a, document.getElementById

const b = (<h1>1222</h1>) 
// 将组件挂载到指定的容器中
// ReactDOM.render(b, document.getElementById('like_button_container'))('like_button_container'))
function Bb() {
  return (<h1>34567</h1>) 
}
/*
  // 将组件挂载到指定的容器中
  ReactDOM.render(<Bb/>, document.getElementById('like_button_container'))
*/

ReactDOM.render(<LikeButton/>, document.getElementById('like_button_container'))

ReactDOM.render: 是将组件挂载到指定的容器中
React.createElement 是创建无状态的组件类似于Function组件
Function 就是创建的组件挂载需要使用标签包裹，类似于执行方法（首字母大写）
class类继承react.component的方式创建组件

三者之间的区别

1、class类和function创建的组件，挂载到容器上，需要使用标签包裹， react.createElement创建的组件不需要进行标签包裹

2、react.createElement()方法


var reactElement = ReactElement.createElement(
      ... // 标签名称字符串/ReactClass,
      ... // [元素的属性值对对象],
      ... // [元素的子节点]
)

1、参数：

1）第一个参数：可以是一个html标签名称字符串，也可以是一个ReactClass（必须）；

2）第二个参数：元素的属性值对对象（可选），这些属性可以通过this.props.*来调用；

3）第三个参数开始：元素的子节点（可选）。

2、返回值：

一个给定类型的ReactElement元素

eg1：第一个参数为一个html标签名称字符串


var li1 = React.createElement('li', null, 'First');
var li2 = React.createElement('li', null, 'Second');
var li3 = React.createElement('li', null, 'Third');
var ul = React.createElement('ul', {className: 'list'}, li1, li2, li3);
ReactDOM.render(
    ul,
    document.getElementById('content')
);

eg2：第一个参数为一个ReactClass （属性值通过this.props.text来调用：）


var Li = React.createClass({
    render:function(){
        return (
              <li>{this.props.text}</li>
          );
    }
})
var li1 = React.createElement(Li, {key:'1',text:'First'});
var li2 = React.createElement(Li, {key:'2',text:'Second'});
var li3 = React.createElement(Li, {key:'3',text:'Third'});
var ul = React.createElement('ul', {className: 'list'}, [li1, li2, li3]);
ReactDOM.render(
    ul,
    document.getElementById('content')
);

总结：react.createElement 传入正常的标签字符，不能获取设置的props，react.createElement 传入react.createClass方式创建的组件a，组件a可以接受react.createElement设置的参数（简单来说，标签不能接受设置的参数，创建的class组件可以接受参数）