react创建组件的方式和JSX的认识

一、react中 创建虚拟DOM 的两种方式

1. 纯JS(一般不用)创建虚拟DOM元素对象  ==>> 注意：script标签的type是 "text/javascript"

<script type="text/javascript">
    // 1. 创建虚拟DOM    
    const msg = 'I Like You!'
    const myId = 'AbCdEf'

    const vDOM1 = React.createElement('h2', {id: myId}, msg.toUpperCase())
    // 2. 渲染到真实页面
    const domContainer = document.getElementById('test1')
    // debugger
    ReactDOM.render(vDOM1, domContainer)
</script>

2. JSX创建虚拟DOM元素对象 ==>> 注意：script标签的type是 "text/babel"

<script type="text/babel">
    // 1. 创建虚拟DOM    
    const vDOM2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>
    // debugger
    // 2. 渲染到真实页面
    ReactDOM.render(vDOM2, document.getElementById('test2'))
 </script>

注意：纯JS方式需要依赖于 react 和 react-dom 这两个库

           JSX方式需要依赖于 react 和 react-dom 以及 babel 这三个库

 

二、创造react组件的方式

1. 工厂函数组件(简单组件)

<script type="text/babel">
    // 1. 定义组件    
    function MyComponent () {
      return <h2>工厂函数组件(简单组件)</h2>
    }
    
    // 2. 渲染组件标签
    ReactDOM.render(<MyComponent />, document.getElementById('example1'))    
</script>

2. ES6类组件(复杂组件)

<script type="text/babel">
    // 1. 定义组件   
    class MyComponent2 extends React.Component {
      render () {
        console.log(this) // MyComponent2的实例对象
        return <h2>ES6类组件(复杂组件)</h2>
      }
    }

    // 2. 渲染组件标签
    ReactDOM.render(<MyComponent2 />, document.getElementById('example2'))
 </script>

注意： ES6类组件  ==> 使用 this.state 来保存组件状态

           工厂函数组件 ==> 使用 useState 来保存组件的状态（不常用）

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！