2021年2月

events 处理

处理 React elements events 和处理 DOM elements 很相似,但有一些语法区别:

  • React events 命名使用 camelCase 规则,而不是 lowercase
  • 使用 JSX 传入 function 作为 events handler,而不是 string 字符串

HMTL 中处理 events 示例如下:

<button onclick="activateLasers()">
  Activate Lasers
</button>

React 中示例如下:

<button onClick={activateLasers}>
  Activate Lasers
</button>

注意它们的区别之处一个是 event 名称,一个是 handler 定义方式。

- 阅读剩余部分 -

rendering elements 渲染元素

一个 element 表示我们想要显示在屏幕上的内容:

const element = <h1>Hello, world</h1>;

不同于浏览器 DOM 中的 elements,React elements 是简单的 objects 且可以很方便的创建,React DOM 会严格的刷新 DOM 并匹配对应的 React elements。

容易混淆的概念是 component 和 element,区别是 component 是用来创建 element 的。在后续章节会介绍。

- 阅读剩余部分 -

请看下面的一个定义:

const element = <h1>Hello, world!</h1>;

它既不是一个 string 也不是 html。它叫做 JSX,是一种对 JavaScript 语法的扩展。推荐在 React 中使用 JSX 来描述 UI,它用来创建 React 类型的 elements 然后将其在 DOM 中渲染。

下面对 JSX 做一些基本介绍。

- 阅读剩余部分 -