집 > 기사 > 웹 프론트엔드 > React 사용: React 구성 요소 내부의 상태 관리

React 사용: React 구성 요소 내부의 상태 관리

不言원래의: 2018-07-20 10:40:572050검색

이 기사에서는 React의 사용 방법을 소개합니다. React 구성 요소의 내부 상태 관리에는 필요한 참조 가치가 있습니다.

이 기사에서는 다음 세 가지 핵심 개념을 이해하거나 다시 생각하기 위해 React 구성 요소 내의 상태 관리에 중점을 둘 것입니다.

props 和 state
기능 구성 요소
클래스 구성 요소

시작해 봅시다!

01. React의 데이터

"컴포넌트"의 관점에서 React는 애플리케이션에 흐르는 데이터를 두 가지 유형으로 나눕니다.

내용을 변경할 수 없지만 구성 요소 간에 단방향으로 전달할 수 있는 Prop입니다.

콘텐츠는 변경될 수 있지만 상태는 구성 요소 간에 전달될 수 없습니다.

게다가 props와 state의 차이점은 props가 외부에 있고 이 구성 요소를 렌더링하는 코드에 의해 제어된다는 것입니다. 상태는 내부적이며 구성 요소 자체에 의해 제어됩니다.

컴퓨터 전공자가 아닌 초보자들은 props와 state의 이름과 의미 사이의 관계에 대해 혼동하는 경우가 많습니다. 사실 그것들은 본질적으로 데이터의 또 다른 이름일 뿐이지만 React에서는 그렇습니다. 각각에는 특별한 제한 사항이나 기능이 제공됩니다.

HTML에서 속성을 전달하는 것처럼 구성 요소의 props 속성을 통해 하위 구성 요소에 전달하려는 데이터를 전달할 수 있습니다. 모든 속성은 하위 구성 요소(클래스 구성 요소)의 this.props 개체에 저장됩니다.

으아악

02. 기능 구성요소

앞서 React가 성능 향상을 위해 컴포넌트를 사용하여 뷰를 렌더링한다고 언급했는데, 컴포넌트는 함수이고 그 기능은 f(data) => UI라는 공식으로 간결하게 표현할 수 있습니다. 이 시점에서 우리가 React가 대규모 MVC(또는 MVVM) 프레임워크가 아니라고 말하는 이유를 눈치챘어야 한다고 생각합니다. 왜냐하면 React는 뷰 레이어(View)의 렌더링만 담당하고 다른 작업은 다른 도구에 의해 완료되기 때문입니다. React 생태계에서.

React 컴포넌트의 경우 가장 간단한 형태는 함수 컴포넌트로, 한 번에 한 가지 작업만 수행한다는 React 철학, 컴포넌트화 및 데이터 기반 UI를 완벽하게 보여줍니다.

함수 컴포넌트는 props를 수신하고 UI를 반환하는 역할만 담당하기 때문에 "상태 비저장 컴포넌트", "제어 컴포넌트" 또는 "puppet 컴포넌트"라고도 합니다. 다음으로, 우리는 실제 React 애플리케이션 개발 시나리오에서 자주 사용합니다. 기능 구성 요소를 최대한 많이 전체 애플리케이션 UI를 가능한 가장 작은 시각적 단위로 분할합니다.

이는 함수 컴포넌트가 매우 직관적이고, 속성 반환 요소를 수신하고, 내부 논리가 명확하고, 더 중요한 것은 함수 컴포넌트에 this 키워드가 없기 때문에 귀찮은 "this"에 대해 걱정할 필요가 없기 때문입니다. 맥락 문제".

기억하세요: 구성 요소가 내부 상태를 추적할 필요가 없다면 기능적 구성 요소를 사용해 보세요.

03. 클래스 구성요소

함수 컴포넌트에 해당하는 것이 "클래스 컴포넌트"입니다. 마찬가지로 "상태 유지 컴포넌트", "비제어 컴포넌트", "컨테이너 컴포넌트"라고도 합니다. 여기서는 코드 형식으로 두 가지 유형의 구성요소를 명명하지만 이는 엄격하지는 않습니다. 왜냐하면 JavaScript에서는 "클래스"도 함수이기 때문입니다.

함수 구성 요소와 달리 클래스 구성 요소에는 변경될 수 있는 내부 데이터(상태)가 있습니다. 이는 궁극적으로 페이지 렌더링에 영향을 미치며 상태는 언제든지 구성 요소에 의해 내부적으로 수정될 수 있습니다. 일반적인 순간은 사용자가 인터페이스와 상호 작용할 때입니다.

React는 변경되는 데이터를 구성 요소 내에 캡슐화하고 단방향 데이터 흐름 원칙을 준수하기 때문입니다. 우리는 고도로 추상적인 UI 구성요소를 갖고 있으며 복잡한 비즈니스 로직을 캡슐화합니다. 이를 통해 일련의 작은 구성요소를 구축하고 결합하여 대규모 애플리케이션을 개발할 수 있습니다.

그렇다면 클래스 구성 요소에 상태를 어떻게 추가합니까? 간단합니다. 우리가 해야 할 일은 클래스 구성 요소 내에 상태 속성을 추가하는 것뿐입니다. 상태 속성은 객체입니다. 이 개체는 구성 요소의 상태를 나타냅니다. 개체의 각 속성 이름은 구성 요소의 특정 상태를 나타냅니다.

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 구성 요소 내부의 상태 관리

관련 기사