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 做一些基本介绍。

阅读全文