React.jsの使い方は？ React.js の簡単な使い方の紹介 (例付き)-jsチュートリアル-php.cn

この記事では主に react.js の使用法について説明し、react が思っているほど難しくないことを皆さんに理解してもらいます。それでは、この記事の具体的な内容を見てみましょう

1、Reactはすべてコンポーネント化されています

Reactは、再利用可能なコンポーネントの概念に基づいて設計されています。小さなコンポーネントを定義し、それらを組み合わせて大きなコンポーネントを形成します。

大小に関係なく、たとえ異なるプロジェクトであっても、すべてのコンポーネントは再利用可能です。

React コンポーネントの最も単純な形式は、単なる通常の JavaScript 関数です:

function Button (props) {
  // 这里返回一个 DOM元素，例如：
  return <buttontype="submit">{props.label}</button>;
}
// 将按钮组件呈现给浏览器
ReactDOM.render(<Buttonlabel="Save" />, mountNode)

ログイン後にコピー

例 1: 上記のコードを編集し、Ctrl+Enter を押して実行します (翻訳者注: この関数の翻訳は当面利用できません。この機能を使用するには原文を参照してください。以下同様)

括弧ラベル内のボタンについては後ほど説明します。今は心配しないでください。 ReactDOMについても後ほど説明しますが、この例と以下の例をすべてテストしたい場合は上記のrender関数が必要です。 (React が引き継いで制御するのは、ターゲット DOM 要素である ReactDOM.render の 2 番目のパラメーターです)。 jsComplete REPL では、特別な変数 mountNode を使用できます。

例 1 注:

コンポーネント名の最初の文字は大文字で、Buttonとなります。これは、HTML 要素と React 要素の混合を扱うことになるため必要です。小文字の名前は HTML 要素用に予約されています。実際、React コンポーネントに「button」という名前を付けると、ReactDOM がこの関数を無視し、通常の空の HTML ボタンとしてレンダリングすることがわかります。

すべてのコンポーネントは、HTML 要素と同様に、属性のリストを受け取ります。 React では、このリストをプロパティと呼びます。ただし、関数には好きな名前を付けることができます。

上記の Button 関数コンポーネントの戻り出力では、奇妙なことに HTML のように見えるコードを書きました。これは実際には JavaScript や HTML ではなく、正直に言うと React.js でもありません。しかし、非常に人気があるため、React アプリケーションのデフォルトになっています。これは JSX と呼ばれ、JavaScript 拡張機能です。 JSX も妥協です。上記の関数で他の HTML 要素を返してみて、それらがどのようにサポートされるかを確認してください (たとえば、テキスト入力要素を返すなど)。

2、JSXは何を出力しますか?

上記の例1は、次のようにJSXを使わずに純粋なReact.jsで書くことができます:

function Button (props) {
  return React.createElement(
    "button",
    { type: "submit" },
    props.label
  );
} 
// 要使用 Button，你可以这么做
ReactDOM.render(
  React.createElement(Button, { label:"Save" }),
  mountNode
);

ログイン後にコピー

例2: No J SX反応を書くコンポーネント

React

トップレベル API では、createElement 関数がメイン関数です。これは、学習する必要がある 7 つの API のうちの 1 つです。 React の API は非常に小さいです。

DOM

自体にタグ名で指定された要素を作成する document.createElement 関数があるのと同じように、React の createElement 関数は document.createElement と同じ機能を持つ高度な関数ですが、 React コンポーネントを表す要素。上記の例 2 で Button コンポーネントを使用する場合は、後者を使用します。

document.createElement

とは異なり、React の createElement は、作成された要素の子要素を表す 2 番目のパラメーターを受け取った後に動的パラメーターを受け取ります。したがって、createElement は実際にツリーを作成します。

これはその例です:

const InputForm = React.createElement(
  "form",
  { target: "_blank", action:"https://google.com/search" },
  React.createElement("p",null, "Enter input and click Search"),
  React.createElement("input", {className: "big-input" }),
  React.createElement(Button, { label:"Search" })
);
// InputForm 使用 Button组件，所以我们需要这样做：
function Button (props) {
  return React.createElement(
    "button",
    { type: "submit" },
    props.label
  );
}
// 然后我们可以通过 .render方法直接使用 InputForm
ReactDOM.render(InputForm, mountNode);

ログイン後にコピー

例 3：React创建元素的 API

上面例子中的一些事情值得注意：

InputForm 不是一个 React组件；它仅仅是一个 React 元素。这就是为什么我们可以在ReactDOM.render 中直接使用它并且可以在调用时不使用的原因。（想看更多就到PHP中文网React参考手册栏目中学习）

React.createElement函数在前两个参数后接收了多个参数。从第3个参数开始的参数列表构成了创建元素的子项列表。

我们可以嵌套 React.createElement调用，因为它是 JavaScript。

当这个元素不需要属性时，React.createElement的第二个参数可以为空或者是一个空对象。

我们可以在 React 组件中混合HTML 元素。你可以将 HTML 元素作为内置的 React组件。

React 的 API试图和 DOM API 一样，这就是为什么我们在 input 元素中使用 className 代替 class 的原因。我们都希望如果 React 的 API 成为 DOM API 本身的一部分，因为，你知道，它要好得多。

上述的代码是当你引入 React 库的时候浏览器是怎样理解的。浏览器不会处理任何 JSX 业务。然而，我们更喜欢看到和使用 HTML，而不是那些 createElement 调用（想象一下只使用document.createElement 构建一个网站！）。这就是 JSX 存在的原因。取代上述调用 React.createElement 的方式，我们可以使用一个非常简单类似于HTML 的语法：

const InputForm =
  <form target="_blank"action="https://google.com/search">
    <p>Enter input and clickSearch</p>
    <inputclassName="big-input" name="q" />
    <Buttonlabel="Search" />
  </form>;
// InputForm “仍然”使用 Button 组件，所以我们也需要这样。
// JXS 或者普通的表单都会这样做
function Button (props) {
  // 这里返回一个 DOM元素。例如：
  return <buttontype="submit">{props.label}</button>;
}
// 然后我们可以直接通过 .render使用 InputForm
ReactDOM.render(InputForm, mountNode);

ログイン後にコピー

例 4：为什么在 React中 JSX 受欢迎（和例3 相比）

注意上面的几件事：

这不是 HTML 代码。比如，我们仍然可以使用 className 代替 class。

我们仍在考虑怎样让上述的 JavaScript看起来像是 HTML。看一下我在最后是怎样添加的。

我们在上面（例 4）中写的就是 JSX。然而，我们要将编译后的版本（例 3）给浏览器。要做到这一点，我们需要使用一个预处理器将 JSX 版本转换为 React.createElement 版本。

这就是 JSX。这是一种折中的方案，允许我们用类似 HTML 的语法来编写我们的 React 组件，这是一个很好的方法。

“Flux” 在头部作为韵脚来使用，但它也是一个非常受欢迎的应用架构，由 Facebook推广。最出名的是 Redux，Flux 和 React 非常合适。

JSX，可以单独使用，不仅仅适用于 React。

3、你可以在 JavaScript的任何地方使用 JSX

在 JSX 中，你可以在一对花括号内使用任何 JavaScript 表达式。

const RandomValue = () =>
  <p>
    { Math.floor(Math.random() * 100)}
  </p>;
// 使用：
ReactDOM.render(<RandomValue />,mountNode);

ログイン後にコピー

例 5：在 JSX中使用 JavaScript 表达式

任何 JavaScript 表达式可以直接放在花括号中。这相当于在 JavaScript 中插入 ${} 模板。

这是 JSX 内唯一的约束：只有表达式。例如，你不能使用 if 语句，但三元表达式是可以的。

JavaScript 变量也是表达式，所以当组件接受属性列表时（不包括 RandomValue组件，props 是可选择的），你可以在花括号里使用这些属性。我们在上述（例 1）的 Button 组件是这样使用的。

JavaScript 对象也是表达式。有些时候我们在花括号中使用 JavaScript对象，这看起来像是使用了两个花括号，但是在花括号中确实只有一个对象。其中一个用例就是将 CSS 样式对象传递给响应中的特殊样式属性：

const ErrorDisplay = ({message}) =>
  <p style={ { color: &#39;red&#39;,backgroundColor: &#39;yellow&#39; } }>
    {message}
  </p>;
// 使用
ReactDOM.render(
  <ErrorDisplay
    message="These aren&#39;t thedroids you&#39;re looking for"
  />,
  mountNode
);

ログイン後にコピー

例 6：一个对象传递特殊的 React样式参数

注意我解构的只是在属性参数之外的信息。这只是 JavaScript。还要注意上面的样式属性是一个特殊的属性（同样，它不是 HTML，它更接近 DOM API）。我们使用一个对象作为样式属性的值并且这个对象定义样式就像我们使用 JavaScript 那样（我们可以这样做）。

你可以在 JSX 中使用 React 元素。因为这也是一个表达式（记住，一个 React 元素只是一个函数调用）：

const MaybeError = ({errorMessage}) =>
  <p>
    {errorMessage &&<ErrorDisplay message={errorMessage} />}
  </p>;
// MaybeError 组件使用 ErrorDisplay组件
const ErrorDisplay = ({message}) =>
  <p style={ { color: &#39;red&#39;,backgroundColor: &#39;yellow&#39; } }>
    {message}
  </p>;
// 现在我们使用 MaybeError组件：
ReactDOM.render(
  <MaybeError
    errorMessage={Math.random() >0.5 ? &#39;Not good&#39; : &#39;&#39;}
  />,
  mountNode
);

ログイン後にコピー

例 7：一个 React元素是一个可以通过 {} 使用的表达式

上述 MaybeError 组件只会在有errorMessage 传入或者另外有一个空的 p 才会显示 ErrorDisplay 组件。React 认为 {true}、 {false}

{undefined} 和 {null} 是有效元素，不呈现任何内容。

我们也可以在 JSX 中使用所有的JavaScript 的集合方法（map、reduce 、filter、 concat 等）。因为他们返回的也是表达式：

const Doubler = ({value=[1, 2, 3]}) =>
  <p>
    {value.map(e => e * 2)}
  </p>;
// 使用下面内容 
ReactDOM.render(<Doubler />, mountNode);

ログイン後にコピー

例 8：在 {}中使用数组

请注意我是如何给出上述 value 属性的默认值的，因为这全部都只是 JavaScript。注意我只是在 p 中输出一个数组表达式。React 是完全可以的。它只会在文本节点中放置每一个加倍的值。

4、你可以使用 JavaScript类写 React 组件

简单的函数组件非常适合简单的需求，但是有的时候我们需要的更多。React也支持通过使用 JavaScript 类来创建组件。这里 Button 组件（在例 1 中）就是使用类的语法编写的。

class Button extends React.Component {
  render() {
    return<button>{this.props.label}</button>;
  }
}
// 使用（相同的语法）
ReactDOM.render(<Buttonlabel="Save" />, mountNode);

ログイン後にコピー

例 9：使用 JavaScript类创建组件

类的语法是非常简单的：定义一个扩展的 React.Component类（另一个你需要学习的 React 的顶级 API）。该类定义了一个单一的实例函数 —— render()，并使函数返回虚拟 DOM 对象。每一次我们使用基于类的 Button 组件（例如，通过