コンセプト

特定のデータが状態であると判断するにはどうすればよいですか

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

II 状態がどのコンポーネントに適用されるかを決定する方法

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

チュートリアル

反応チュートリアル

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

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

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

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

インストール

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

このチュートリアルでは React バージョン 16.4.0 を使用します。最新バージョンは公式 Web サイトhttps://reactjs.org/からダウンロードできます。
Staticfile CDN の React CDN ライブラリを直接使用することもできます。アドレスは次のとおりです。

<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>

Reactの特徴

1. 宣言型設計 − React は、アプリケーションを簡単に記述できる宣言型パラダイムを採用しています。

2. 効率的 - React は DOM をシミュレートすることで DOM との対話を最小限に抑えます。

3. 柔軟性 - React は既知のライブラリやフレームワークとうまく連携します。

4.JSX - JSX は JavaScript 構文の拡張です。React 開発では JSX を使用する必要はありませんが、使用することをお勧めします。

5. コンポーネント − React を通じてコンポーネントを構築すると、コードの再利用が容易になり、大規模プロジェクトの開発にうまく適用できます。

6. 一方向応答データフロー - React は一方向応答データフローを実装するため、コードの重複が減り、従来のデータバインディングよりもシンプルになります。

使用事例

各章では、オンラインでインスタンスを編集し、ボタンをクリックして結果を表示できます。
このチュートリアルでは React バージョン 16.4.0 を使用します。最新バージョンは公式 Web サイトhttps://reactjs.org/からダウンロードできます。

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

反応とは何ですか？反応原理