理解 React 的基本概念（组件、状态和 JSX）

React 本身其实是一个非常简单的框架，要理解它的用法，无外乎就是理解下面三个概念：组件、状态和 JSX。

使用组件的方式描述 UI 使用组件的方式描述 UI在 React 中，所有的 UI 都是通过组件去描述和组织的。可以认为，React 中所有的元素都是组件，具体而言分为两种。

内置组件。内置组件其实就是映射到 HTML 节点的组件，例如 div、input、table 等等，作为一种约定，它们都是小写字母。

自定义组件。自定义组件其实就是自己创建的组件，使用时必须以大写字母开头，例如 TopicList、TopicDetail。

和 DOM 的节点定义类似，React 组件是以树状结构组织到一起的，一个 React 的应用通常只有一个根组件。

核心介绍

最简易的 React 示例如下：

`ReactDOM.render(

Hello, world!

, document.getElementById('root') );`

它将在页面上展示一个 “Hello, world!” 的标题。

JSX 简介考虑如下变量声明：

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

这个有趣的标签语法既不是字符串也不是 HTML。

它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。

JSX 可以生成 React “元素”。我们将在下一章节中探讨如何将这些元素渲染为 DOM。下面我们看下学习 JSX 所需的基础知识。

在 JSX 中嵌入表达式在下面的例子中，我们声明了一个名为 name 的变量，然后在 JSX 中使用它，并将它包裹在大括号中：

在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。例如，2 + 2，user.firstName 或 formatName(user) 都是有效的 JavaScript 表达式。

JSX是一种用于描述UI的JavaScript扩展语法，React使用这种语法描述组件的UI。JSX语法只是React.creatElement(component, props, …children) 的语法糖，所有的JSX语法最终都会被转换成对这个方法的调用。

元素渲染元素是构成 React 应用的最小砖块。

元素描述了你在屏幕上想看到的内容。

与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

你可能会将元素与另一个被熟知的概念——“组件”混淆起来。我组件是由元素构成的。

将一个元素渲染为 DOM 假设你的 HTML 文件某处有一个

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

我们将其称为“根” DOM 节点，因为该节点内的所有内容都将由 React DOM 管理。

id为root的div，是一个特殊的div，该节点内的所有内容都将由 React DOM 管理！

想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()：

const element = <h1>Hello, world</h1>; ReactDOM.render(element, document.getElementById('root'));

更新已渲染的元素 React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。

更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。

组件 & Props 渲染组件

之前，我们遇到的 React 元素都只是 DOM 标签：

const element = <div />;

不过，React 元素也可以是用户自定义的组件：

const element = <Welcome name="Sara" />;

当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。

例如，这段代码会在页面上渲染 “Hello, Sara”：

我们调用 ReactDOM.render() 函数，并传入作为参数。 React 调用 Welcome 组件，并将 {name: ‘Sara’} 作为 props 传入。 Welcome 组件将Hello, Sara 元素作为返回值。 React DOM 将 DOM 高效地更新为 Hello, Sara。注意：组件名称必须以大写字母开头。

React 会将以小写字母开头的组件视为原生 DOM 标签。例如，

代表 HTML 的 div 标签，而则代表一个组件，并且需在作用域内使用 Welcome。组件是React的核心概念，是React应用程序的基石。定义一个组件有2种方式，使用ES 6 class（类组件）和使用函数（函数组件）。

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

使用class定义组件需要满足两个条件：

class继承自React.Component。 class内部必须定义render方法，render方法返回代表该组件UI的React元素。将函数组件转换成 class 组件通过以下五步将 Clock 的函数组件转成 class 组件：

创建一个同名的 ES6 class，并且继承于 React.Component。添加一个空的 render() 方法。将函数体移动到 render() 方法之中。在 render() 方法中使用 this.props 替换 props。删除剩余的空函数声明。每次组件更新时 render 方法都会被调用。

事件处理 React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

React 事件的命名采用小驼峰式（camelCase），而不是纯小写。使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。例如，传统的 HTML：

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

在 React 中略微不同：

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

在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault 。例如，传统的 HTML 中阻止链接默认打开一个新页面，你可以这样写：

Click me

在 React 中，可能是这样的：

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

在这里，e 是一个合成事件。React 根据 W3C 规范来定义这些合成事件，所以你不需要担心跨浏览器的兼容性问题。

当你使用 ES6 class 语法定义一个组件的时候，通常的做法是将事件处理函数声明为 class 中的方法。

快速入门React ｜ 青训营

理解 React 的基本概念 （组件、状态和 JSX）

核心介绍

Hello, world!

快速入门React ｜青训营

理解 React 的基本概念（组件、状态和 JSX）