ホームページ > 記事 > ウェブフロントエンド > React の使用: React コンポーネント内の状態管理

React の使用: React コンポーネント内の状態管理

不言オリジナル: 2018-07-20 10:40:572050ブラウズ

この記事では React の使い方を紹介します。React コンポーネントの内部状態管理には特定の参照値があります。必要な場合はそれを参照してください。

この記事では、React コンポーネント内の状態管理に焦点を当てて、次の 3 つの中心的な概念を理解または再考します。

props 和 state
機能コンポーネント
クラスコンポーネント

はじめましょう！

01. React のデータ

「コンポーネント」の観点から見ると、React はアプリケーション内を流れるデータを 2 つのタイプに分類します。

コンテンツを変更することはできませんが、コンポーネント間で一方向に渡すことができるプロパティ。

コンテンツは変更できますが、状態をコンポーネント間で渡すことはできません。

さらに、プロパティと状態の違いは、プロパティは外部であり、このコンポーネントをレンダリングするコードによって制御されることです。状態は内部的なものであり、コンポーネント自体によって制御されます。

コンピューターを専攻していない初心者は、props と state の名前と意味の関係についてよく混乱します。実際、これらは本質的にはデータの別名にすぎませんが、React ではそれぞれに名前が付けられています。特別な制限または機能。

HTML でプロパティを渡すのと同じように、コンポーネントの props 属性を通じて、子コンポーネントに渡したいデータを渡すことができます。すべてのプロパティは、子コンポーネント (クラスコンポーネント) の this.props オブジェクトに格納されます。

リーリー

02. 機能コンポーネント

React はパフォーマンスを向上させるためにコンポーネントを使用してビューをレンダリングすることを前に説明しました。コンポーネントは関数であり、その関数は f (データ) => UI という式で簡潔に表現できます。この時点で、React が大規模な MVC (または MVVM) フレームワークではないと言っている理由に気づいたはずです。React はビューレイヤー (View) のレンダリングのみを担当し、その他のことは他のツールによって完了されるからです。 React エコシステム内で。

そうは言っても、React コンポーネントの場合、最も単純な形式は関数コンポーネントです。これは、一度に 1 つのことを実行するという React の哲学、コンポーネント化とデータ駆動型 UI を完全に示しています。

関数コンポーネントは、実際の React アプリケーション開発シナリオでは、関数コンポーネント自体が変更可能なデータを持つことができないため、「ステートレスコンポーネント」、「制御コンポーネント」、または「パペットコンポーネント」とも呼ばれます。関数コンポーネントをできる限り多くして、アプリケーション UI 全体を最小の視覚単位に分割します。

これは、関数コンポーネントが非常に直感的であり、属性を受け取って要素を返し、内部ロジックが明確で明確であるためです。さらに重要なことに、関数コンポーネントには this キーワードがないため、煩わしい「this」について心配する必要がありません。文脈の問題」。

注意: コンポーネントが内部状態を追跡する必要がない場合は、機能コンポーネントを使用するようにしてください。

03. クラスコンポーネント

関数コンポーネントに相当するのが「クラスコンポーネント」で、同様に「ステートフルコンポーネント」、「非制御コンポーネント」、「コンテナコンポーネント」とも呼ばれます。ここで、2 種類のコンポーネントにコードの形式で名前を付けていますが、JavaScript では「クラス」も関数であるため、これは厳密ではないことに注意してください。

関数コンポーネントとは異なり、クラスコンポーネントには変更可能な内部データ (状態) があります。これは最終的にページのレンダリングに影響し、状態はいつでもコンポーネントによって内部的に変更される可能性があります。通常の瞬間は、ユーザーがインターフェイスを操作するときです。

React はコンポーネント内の変更データをカプセル化し、一方向のデータフローの原則に準拠しているためです。高度に抽象化された UI コンポーネントがあり、複雑なビジネスロジックをカプセル化しています。これにより、一連の小さなコンポーネントを構築して組み合わせることで、大規模なアプリケーションを開発できるようになります。

では、クラスコンポーネントに状態を追加するにはどうすればよいでしょうか?それは簡単です。クラスコンポーネント内に state 属性を追加するだけです。state 属性はオブジェクトです。このオブジェクトはコンポーネントの状態を表します。オブジェクトの各属性名はコンポーネントの特定の状態を表します。

import React from "react"class Parent extends React.Component {
    state = {
        name: "Eliot",
    }
    
    render() {        return <p>{this.state.name}</p>
    }
}

React 使我们迫使大脑关注两个重要的部分：

组件看起来是什么样？

组件当前的状态是什么？

通过让组件管理自己的状态，任何时候状态的变更都会令 React 自动更新相应的页面部分。这便是使用 React 构建组件的主要优势之一：当页面需要重新渲染时，我们仅仅需要思考的是如何更改状态。我们不必跟踪页面的哪些部分需要更改，不需要决定如何有效的重新呈现页面，React 自会比较先前的输出和新的输出，决定什么应该发生改变，并为我们做出决定。而这个确定之前改变了什么和现在应该新输出什么的过程有一个专门的名词，叫做 Reconciliation。

04. 修改 state

你应该还记得类组件与函数组件最大的不同在于类组件自身拥有可以改变内部数据的能力。那么如何行使这一能力呢？和直觉不同，要做到这一点，你需要使用 React 提供的专门的 API：this.setState()。

你有两种方式使用该 API：

设置对象参数；

设置函数参数；

让我们先来看看第一种：

this.setState({    name: "Tom"})

React 会自动合并对 state 的改变。而有时，你的组件需要一个新的 state ，而这个 state 的变化又依赖于旧的 state值，每当这种时候，你就该使用第二种 API 调用方式：

this.setState((prevState) => ({
    name: "mr." + prevState.name
}))

讲到这里你可能会感到奇怪，只是更新 state 而已，为什么还需要调用一个专门的 API？我们直接修改之前定义的 state对象不就好了吗？之所以这样设计的原因是，组件内 state 的变化不仅仅是对象属性值发生变化那么简单，它还需要驱动整个 UI 进行重新渲染，因此 this.setState() 这个 API 被调用时实际上做了两件事：

修改 state 对象；

驱动组件重新渲染；

如果你对 React 有一定研究，你可能会质疑我以上所罗列的两点并不精确，的确如此，小小的 this.setState() API 其实内部还有很多细节值得注意，例如，当调用 this.setState() 时并不会立即改变 state 的值，也当然不会立即重新渲染组件。例如，当以对象为参数调用 this.setState() API 时，尽管内部重复为数据赋值，最终的数据也只保留最后一次更改的结果。

不过幸好，这些略显古怪的状态早有前人为我们做了详尽的解释，如果你感兴趣，请点击下方链接查询更多的信息：

setState：这个API设计到底怎么样

问一个react更新State的问题？

05. 控制组件

当你在 Web 应用中使用表单时，这个表单的数据被存储于相应的 DOM 节点内部，但正如我们之前提到的，React 的整个关键点就在于如何高效的管理应用内的状态。所以虽然表单的数据被存储于 DOM 中，React 依然可以对它进行状态管理。

而管理的方式即是使用“控制组件”。简单而言，“控制组件”会渲染出一个表单，但是将表单所需的所有真实数据作为 state 存储于组件内部，而不是 DOM 中。

之所以被称为“控制组件”的原因也即在于此，“控制组件”控制着组件内的表单数据，因此，唯一更新表单数据的方式就是更新组件内部对应的 state 值。

import React as "react"class Input extends React.Component {
    state = {
        value: "enter something...",
    }
    
    handleClick: (e) => {        this.setState({value: e.target.value})
    }
    
    render() {
        <input value={this.state.value} onKeyup={this.handleClick} />
    }
}

可以看到，我们使用 handleClick 方法响应用户每一次键盘敲击以即时更新表单状态，这样做不仅天然的支持了即时的输入验证，还允许你有条件的禁止或点亮表单按钮。

06. 小结

这篇文章我们介绍了 React 的两种数据形式：state 和 props，并且介绍了 React 组件的两种形式：函数组件与类组件，希望各位有所收获。

React の使用: React コンポーネント内の状態管理

関連記事