React 中的组件实例和类实例

import React from 'react'
import ReactDOM from 'react-dom'

// 函数组件
function Hello1 () {
  return <h1>Hello Word</h1>
}
const Hello2 = () => <h2>Hello React</h2>
const arr = [
  { id: '1', name: '小乌龟', age: 888 },
  { id: '2', name: '大乌龟', age: 1999 },
  { id: "3", name: '牛头', age: 5 }
]

// 类组件
class Hello3 extends React.Component {
  // render 当中的this 是Hello3 组件的实例
  render () {
    // render 里面必须 return 可以 return null
    return <h1>一朵菊花压海棠</h1>
  }
}
const el = (
  <>
    <Hello1 />
    <Hello2 />
    <Hello3 />
    <h3>Hello 世界</h3>
    <h4>Hello 哈西撒嘛</h4>
    <h5>Hello 嗒咩</h5>
    <ul>
      {arr.map((item) => (
        <li key={item.id}>
          <h4>姓名:{item.name}</h4>
          <p>年龄:{item.age}</p>
          <p>是否成年:{item.age > 18 ? '已成年' : '未成年'}</p>
        </li>
      ))}
    </ul>
  </>
)
// ReactDOM.render 渲染过程
// 解析<el> 发现大写开头的会当作组件进行解析
// 又发现是一个类组件,内部会new xxx() 得到一个舰实例,调用实例下面的render方法,拿到JSX 结构(虚拟DOM.React 元素)
// 转换成真是的DOM 渲染到页面上面
ReactDOM.render(el, document.querySelector('#root'))