React-JSX如何转换为DOM

1 JSX

JavaScript的一种扩展语法，类似js和html的结合。

优点：

• 执行更快，在编译为JavaScript后会优化
• 编译阶段就能发现错误
• 可以嵌套html标签

import { useRef } from 'react';

export default function Counter() {
  let ref = useRef(0);

  function handleClick() {
    ref.current = ref.current + 1;
    alert('你点击了 ' + ref.current + ' 次!');
  }

  return (
    <button onClick={handleClick}>
      点我！
    </button>
  );
}

JSX渲染流程