반응의 구성 요소는 무엇입니까?-프런트엔드 Q&A-php.cn

React에서 컴포넌트는 중국어로 "컴포넌트"를 의미합니다. 이는 독립적인 기능을 가진 캡슐화된 UI 컴포넌트로, 표시할 콘텐츠가 여러 개의 독립적인 부분으로 나누어져 있으며, 각 부분이 컴포넌트입니다. 구성 요소에는 두 가지 중요한 사항이 있습니다. 하나는 속성이고 다른 하나는 상태입니다. 구성 요소의 속성은 상위 구성 요소에 의해 제공되며 하위 구성 요소에 대한 상위 구성 요소의 요구 사항을 저장합니다. 속성은 구성 요소 내에서 액세스할 수 있지만 구성 요소의 상태를 정의하고 사용할 수는 없습니다. 구성 요소 자체에 의해 구성 요소의 현재 상태가 수정될 수 있습니다.

반응의 구성 요소는 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, React18 버전, Dell G3 컴퓨터.

React에서 컴포넌트는 독립적인 기능을 가진 캡슐화된 UI 컴포넌트인 UI 단위입니다. 아이디어는 표시할 콘텐츠를 여러 개의 독립적인 부분으로 나누는 것입니다. 이러한 각 부분은 Android 또는 iOS의 컨트롤과 약간 유사한 구성 요소입니다.

구성요소는 페이지의 일부입니다. 크고 작은 다양한 구성요소가 모여서 완전한 페이지를 형성합니다. 우리가 플레이하는 퍼즐처럼 조각조각 맞춰져야 완전한 퍼즐이 됩니다.

반응의 구성 요소는 무엇입니까?

1. 컴포넌트의 기본 컴포넌트

각 컴포넌트는 실제로 코드에서 추출된 클래스로, 가장 간단한 컴포넌트입니다.

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

로그인 후 복사

위 코드에서 볼 수 있듯이 컴포넌트와 일반 클래스도 가능합니다. 방법을 정의합니다. 구성 요소의 경우 render() 메서드는 매우 중요하며(구현해야 함) 구성 요소의 인터페이스가 반환되는 것은 이 메서드입니다. render() 메서드에서 JSX는 구성 요소의 인터페이스를 정의하는 데 사용됩니다. render() 메서드에 대해서는 나중에 자세히 설명합니다.

또한, 컴포넌트에는 두 가지 중요한 것이 있는데, 하나는 속성(props)이고 다른 하나는 상태(state)입니다. 간단히 말해서, 구성 요소의 속성은 상위 구성 요소에 의해 제공됩니다(구성 요소는 중첩될 수 있음). 저장되는 것은 하위 구성 요소에 대한 상위 구성 요소의 요구 사항입니다. 속성은 구성 요소 내에서 액세스(사용)될 수 있습니다. ;구성 요소의 상태는 구성 요소 자체에 의해 정의되고 사용됩니다. 구성 요소의 현재 상태를 저장하는 데 사용됩니다.

2. 컴포넌트 수명 주기

컴포넌트의 수명 주기는 크게 표시(마운트), 새로 고침(업데이트), 사라짐(마운트 해제)의 세 단계로 나눌 수 있습니다.
각 단계에서는 여러 단계가 세분화됩니다.

1. 표시 단계(마운팅)

은 구성 요소가 생성되어 뷰에 삽입되는 단계입니다.

constructor(props)

구성 요소는 다음과 같이 실행됩니다. 메서드 내에서 상위 구성 요소가 전달한 속성 개체 소품에 액세스할 수 있습니다. 이 메서드를 재정의하려면 super(props)를 먼저 작성해야 합니다. 그렇지 않으면 이 구성 요소 내에서 속성에 액세스할 수 없습니다(속성 내용은 나중에 자세히 설명합니다).

comComponentWillMount()
render()
comComponentDidMount()

2. 새로 고침 단계(업데이트 중)

구성 요소는 해당 속성(props) 및 상태(state)가 변경될 때 트리거됩니다. 새로고침하면 다음 메소드가 한번에 실행됩니다:

comComponentWillReceiveProps(nextProps)

컴포넌트의 속성이 변경되면 호출됩니다. 이 메소드에서는 nextProps가 새로운 속성입니다. 이 메서드 내에서 상태를 업데이트하려면 먼저 상태를 새로 고치기 전에 속성의 현재 값과 새 값이 다른지 확인해야 합니다.

shouldComponentUpdate()

이 메서드는 구성 요소의 render() 메서드가 호출되는지 여부를 결정하기 위해 true 또는 false를 반환합니다.

comComponentWillUpdate()
render()
comComponentDidUpdate()

3. 소멸 단계(Unmounting)

컴포넌트가 제거된 후 소멸 단계에 진입하여 다음 메소드를 실행합니다.

componentWillUnmount()

3. 구성 요소 속성, 상태 및 메서드

구성 요소 내부에서 자체 속성, 상태 및 메서드에 액세스하려면 일반적으로 이 키워드를 사용하여 이 구성 요소의 의미를 표현해야 합니다. .

1. 구성 요소 메서드

구성 요소 메서드에 액세스하는 형식:
this.methodName(param1, param2,...) this.methodName(param1，param2，…)
如，在组件内部定义了方法:

_method()
{
console.log(‘method call ! ~~~~’);
}

로그인 후 복사

要调用它：
this._method(); 예를 들어, 메서드는 구성 요소 내부에 정의됩니다. :

{
property1:value1,
property2:value2,
…
}

로그인 후 복사

호출하려면: this._method();

2. 구성 요소 속성🎜🎜🎜

上面提到，组件的属性，是由父组件给的，从意义上理解，组件的属性用来存储父组件对子组件的要求。
访问组件的属性格式：
this.props.propertyName
这里看到，与访问组件的方法不同，这里没有直接在this后就直接跟属性名，中间多了一个props。这个props其实是一个属性对象，上面我们提到属性是父组件给的，那么这个props对象就相当于把父组件给的所有的属性都封装起来，一个props对象像这样：

{
property1:value1,
property2:value2,
…
}

로그인 후 복사

注意，在使用react的时候会经常遇到用这种形式表示的对象，也就是一个花括号内包含若干对属性名和属性值。
访问组件的属性的例子：
例如组件有一个属性height，那么要访问它：
this.props.height;
虽然属性不能修改，但我们能给组件属性一个默认值，也就是说，当父组件没有给该属性赋值的时候，使用的一个默认值。
例如给组件CustomButton定义默认属性：

CustomButton.defaultProps = {
  color: &#39;blue&#39;
};

로그인 후 복사

另外还可以给组件的属性指定类型，在开发模式下这个如果父组件设置的属性不符合子组件设定的类型的话，会输出警告，在生产模式下就不会对类型进行检查，例如，设定CustomButton组件的color属性的类型为字符：

CustomButton.propTypes = {
  color: React.PropTypes.string
};

로그인 후 복사

3. 组件的状态

组件的状态，就是用来存储组件的当前状态。
访问状态的格式：
this.state.propertyName
例如，组件有个属性height，那么要访问它对应的状态：
this.state.height;
与组件的属性类似，这里也没有直接在this后跟属性名，中间多了个state。类似的，state也是一个状态对象，把所有属性对应的状态封装起来。既然是对象，当然也可以使用上面说的“花括号内包含若干对属性名和属性值”的形式来表示，像这样:

{
property1:value1,
property2:value2,
…
}

로그인 후 복사

上面提到，属性是父组件给的，不可修改，但状态可以修改。由于状态是一个对象，因此修改状态，就是给this.state赋予一个新的对象：

this.state = {
propertyName1：newValue1，
propertyName2：newValue2，
…
};

로그인 후 복사

或者使用setState()方法，这个方法会将新的、旧的状态合并，因此只需要填入有变化的状态就好，

this.setState({
propertyName1：newValue1，
propertyName2：newValue2，
…
});

로그인 후 복사

例如，修改一个组件的两个状态height和width分别为100和200：

this.state = {
height:100,width:200,
};

로그인 후 복사

或

this.setState({
height:100,
width:200,
});

로그인 후 복사

四、组件的render()方法

上面提到，render()方法是专门用来返回组件界面的。从组件的生命周期可以看出，在组件第一次加载的时候，或者组件的props或state有变化的时候，render()方法都会被调用，也就是说这两种情况下，组件会重画它的界面，因此在render()方法中尽量只做有关界面的事情。
组件的界面也是由一个或多个其他的组件组成的，比如View、Button、Text等等。需要注意的是，如果当多个子组件都需要使用同一个状态（状态可能会改变）的时候，为了减少对状态（属性）的访问次数，建议在render()方法中，先用一个变量存储该状态的当前值，然后在各个组件中使用这个变量，而不是在各个组件中多次访问这个状态。
例如，这里组件Text、Input、Image都是用到了this.state.value，推荐的写法是：

 render() {
    const value = this.state.value;
    return (
    <View>
      <Text>{value}</Text>
      <Input value={value} onChange={this.handleChange} />
      <Image source = {{ uri : value }}/>
    </View>
    );
  }

로그인 후 복사

在上面的例子当中，return()方法内部是由的是JSX，ReactNative支持的表示界面的一种语法，类似于XML或者HTML。这个可以去查查看。
这个例子里，组件使用的都是this.state.value。这里可能就存在疑惑，在组件中什么时候应该用props，什么时候应该用state。下面看，属性和状态的使用场景。

五、属性和状态的使用场景

在组件中应该用props还是state，取决于这个信息是来自于组件内部还是来自于组件外部。什么意思呢？
例如，自定义一个组件CustomView（如下图）。CustomView包括一个输入框组件Input和一个文本框组件CustomText。现在要求CustomText显示的文本随Input中输入的内容变化（输入什么就显示什么）。

반응의 구성 요소는 무엇입니까?

对于组件CustomView，其子组件CustomText的要显示的文本来自于子组件Input，都是在CustomView的内部，因此CustomView可以用this.state.value来存储输入框的内容，然后CustomText就显示this.state.value。
那么站在组件CustomText的角度，假定CustomText内部包含一个Text组件，实际上文本是由Text组件显示的（如下图）：

반응의 구성 요소는 무엇입니까?

为了满足组件CustomText的文本随输入框的内容改变，就要求CustomView要将输入框的内容传到CustomText内部，这样CustomText的子组件Text才可以访问到。这就需要用到属性。如果CustomView通过属性textFromInput传给CustomText的话，在CustomText内部，就可以通过this.props.textFromInput访问到。
所以CustomView的render()方法应该是这样的：

render(){
     var value = this.state.value;
     return(
        <CustomText textFromInput = {value}/>
        <Input onChange = {this._inputValueChange}/>
     );
}

로그인 후 복사

CustomText的render()方法应该是这样的：

render(){
     return(
        <Text>{this.props.textFromInput}</Text>
     );
}

로그인 후 복사

这时候，只要实现每次输入内容变化的时候更新状态value，就可以实现CustomText的内随输入内容变化。上面onChange指向_inputValueChange方法，于是实现该方法：

this._inputValueChange(e){
    this.setState({
    value:e.target.value;
    });
}

로그인 후 복사

【相关推荐：Redis视频教程、编程入门】

위 내용은 반응의 구성 요소는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!