React Hook 函数组件不使用JSX

在官网的文档里不使用jsx写法只有类组件的说明与示例。搜索了一圈并未找到有 hook + 函数组件 的写法说明。在这里做补充。

引入react 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>

创建容器

<div id="root"></div>

JavaScript 代码

const { createElement, useState } = React
const { render } = ReactDOM

function App(props) {

  const numState = useState(0)
  const [num, setNum] = numState

  function addNum() {
    setNum(num+1)
  }

  return createElement('div', null, [
    createElement('p', {
      key: 'pp'
    }, num),
    createElement('button', {
      onClick: addNum,
      key: 'btn'
    }, 'Add')
  ])
}

render(createElement(App, null, null), document.getElementById('root'))