Konzept

Wie beurteile ich, dass bestimmte Daten ein Zustand sind?

它是通过 props 从父级传来的吗？如果是，他可能不是 state。
它随着时间推移不变吗？如果是，它可能不是 state。
你能够根据组件中任何其他的 state 或 props 把它计算出来吗？如果是，它不是 state。

II So ermitteln Sie, für welche Komponente der Status gilt

确定每一个需要这个 state 来渲染的组件。
找到一个公共所有者组件(一个在层级上高于所有其他需要这个 state 的组件的组件)
这个公共所有者组件或另一个层级更高的组件应该拥有这个 state。
如果你没有找到可以拥有这个 state 的组件，创建一个仅用来保存状态的组件并把它加入比这个公共			所有者组件层级更高的地方。

Lernprogramm

React-Tutorial

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

Installieren

React 可以直接下载使用，下载包中也提供了很多学习的实例。

Dieses Tutorial verwendet React Version 16.4.0. Sie können die neueste Version von der offiziellen Website https://reactjs.org/ herunterladen.
Sie können auch direkt die React CDN-Bibliothek von Staticfile CDN verwenden. Die Adresse lautet wie folgt:

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"</script> 
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> 
<!-- 生产环境中不建议使用 --> 
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

 官方提供的CDN地址

官方提供的 CDN 地址：

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

Funktionen von React

1. Deklaratives Design - React übernimmt das deklarative Paradigma, mit dem die Anwendung leicht beschrieben werden kann.

2. Effizient – React minimiert die Interaktion mit dem DOM, indem es das DOM simuliert.

3. Flexibel – React funktioniert gut mit bekannten Bibliotheken oder Frameworks.

4.JSX – JSX ist eine Erweiterung der JavaScript-Syntax. Für die React-Entwicklung muss JSX nicht verwendet werden, wir empfehlen jedoch die Verwendung.

5. Komponenten – Das Erstellen von Komponenten über React erleichtert die Wiederverwendung von Code und kann gut bei der Entwicklung großer Projekte eingesetzt werden.

6. Einweg-Antwortdatenfluss – React implementiert einen unidirektionalen Antwortdatenfluss, wodurch die Duplizierung von Code reduziert wird und daher einfacher als die herkömmliche Datenbindung ist.

Anwendungsfall

In jedem Kapitel können Sie die Instanz online bearbeiten und auf die Schaltfläche klicken, um das Ergebnis anzuzeigen.
Dieses Tutorial verwendet React Version 16.4.0. Sie können die neueste Version von der offiziellen Website https://reactjs.org/ herunterladen.

<div id="example"></div>
<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
  );
</script>

Was ist reagieren? Reaktionsprinzip