React （hooks）的写法与 React 实现

import React from "react";

const Drag: React.FC = (): React.ReactElement => {
  // hook useState: Returns a stateful value, and a function to update it.
  const [number, setNumber] = useState(0);
    
  return (
    <React.Fragment>
      <div>{number}</div>
    </React.Fragment>
  );
};

什么是 JSX

JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Although there are other ways to write components, most React developers prefer the conciseness of JSX, and most codebases use it.

JSX是JavaScript的语法扩展，它允许您在JavaScript文件中编写类似html的标记。尽管还有其他编写组件的方法，但大多数React开发人员更喜欢JSX的简洁性，而且大多数代码库都使用它。

1. Return a single root element

返回一个根节点

To return multiple elements from a component, wrap them with a single parent tag.

要从组件中返回多个元素，用一个父标签包装它们

example (

...

) :

<div>
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>

If you don’t want to add an extra <div> to your markup, you can write <> and </> instead:

如果你不想在你的标记中添加额外的'
'，你可以用' <> '和' </> ' ( React.Fragment ) 来代替:

<>
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</>

This empty tag is called a Fragment. Fragments let you group things without leaving any trace in the browser HTML tree.

import React from "react";

const Drag: React.FC = (): React.ReactElement => {
  return (
    <></>
    <></>
  );
};

!!error: JSX expressions must have one parent element.

2. Close all the tags

闭合所有标签

JSX requires tags to be explicitly closed: self-closing tags like <img> must become <img />, and wrapping tags like <li>oranges must be written as <li>oranges</li>.

This is how Hedy Lamarr’s image and list items look closed:

3. camelCase all most of the things!

小驼峰

<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  className="photo" 
  class="error" // Warning: Invalid DOM property `class`. Did you mean `className`?
/>

Responding to Events

React lets you add event handlers to your JSX. Event handlers are your own functions that will be triggered in response to interactions like clicking, hovering, focusing form inputs, and so on.

React允许您向JSX添加事件处理程序。事件处理程序是您自己的函数，将在响应诸如单击、悬停、聚焦表单输入等交互时触发。

export default function Button() {
  return (
    <button>
      I don't do anything
    </button>
  );
}

Adding event handlers

You can make it show a message when a user clicks by following these three steps:

Declare a function called handleClick inside your Button component.
Implement the logic inside that function (use alert to show the message).
Add onClick={handleClick} to the <button> JSX.

export default function Button() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

You defined the handleClick function and then passed it as a prop to <button>. handleClick is an event handler. Event handler functions:

您定义了' handleClick '函数，然后将其作为Props传递给' '。handleClick是一个事件处理程序。

Are usually defined inside your components.
Have names that start with handle, followed by the name of the event.

通常在组件中定义。名称以句柄开头，后跟事件名称。

By convention, it is common to name event handlers as handle followed by the event name. You’ll often see onClick={handleClick}, onMouseEnter={handleMouseEnter}, and so on.

Alternatively, you can define an event handler inline in the JSX:

<button onClick={function handleClick() {
  alert('You clicked me!');
}}>

Or, more concisely, using an arrow function:

<button onClick={() => {
  alert('You clicked me!');
}}>

All of these styles are equivalent. Inline event handlers are convenient for short functions.

React ---- 什么是JSX