반응 제어 구성요소와 비제어 구성요소에 대한 자세한 설명

이 글은 주로 React 제어 컴포넌트와 비제어 컴포넌트에 대한 간략한 논의를 소개합니다(요약). 이제 공유하고 참고하겠습니다.

d5fd7aea971a85678ba271703566ebfd, 221f08282418e2996498697df914ce4e 또는 제가 현재 사용하고 있는 서식 있는 텍스트 편집기와 같이 사용자 상호 작용에 의해 변경될 수 있는 웹 구성 요소가 많다는 것을 우리 모두 알고 있습니다. 이러한 구성 요소는 일상적인 개발에서 눈에 띄지 않습니다. 일부 콘텐츠를 입력하거나 요소의 값 속성을 설정하면 구성 요소의 값을 쉽게 변경할 수 있습니다. 그러나 React는 단방향 데이터 흐름에 묶여 있기 때문에 이러한 구성 요소는 제어할 수 없게 될 수 있습니다.

1. 자체 상태로 값을 유지하는 0d8d8502ad9fc5bd029f7f31e30fdff5 구성 요소는 외부에서 수정할 수 없습니다. props를 통해 값을 설정하는 0d8d8502ad9fc5bd029f7f31e30fdff5 구성요소는 외부 제어를 통해서만 업데이트할 수 있습니다.

최근 Ant Financial에서 제작한 React 기반 Ant-Design UI 컴포넌트를 사용할 때 문제가 발생했습니다. 페이지를 편집할 때 입력 상자에 저장하기 전에 데이터가 표시되지만 defaultValue를 사용하면 입력 상자가 항상 작동하지 않습니다. 전달된 특정 값 대신 null 값입니다. 특정 편집 페이지의 텍스트 상자와 관련된 코드는 다음과 같습니다.

    ... //render方法上面的内容省略
 <FormItem
   label="问题描述："
   hasFeedback
   {...props.formItemLayout}
 >
  <Input type="textarea" defaultValue={props.value}/>
</FormItem>
      //render下面的内容省略
      ...

코드 세그먼트가 속한 컴포넌트에 value props를 전달한 후 텍스트 상자의 기본값은 항상 비어 있는 상태입니다. 페이지를 찾았으면 초기 값에 해당하는 상태가 비어 있으므로 후속 비동기 요청이 성공한 후 값에 해당하는 상태의 값이 변경되고 여전히 비어 있는 것으로 표시됩니다.

구체적인 이유는 React의 양식 구성 요소에 있는 defaultValue가 전달되면 이후에 defaultValue에 대한 변경 사항이 적용되지 않고 무시되는 것으로 나타났습니다.

구체적으로 이것은 반응 비제어 구성요소입니다. 해당 상태는 입력 반응 내에서 제어되며 호출자에 의해 제어되지 않습니다. 이는 제어되는 구성 요소를 사용하여 달성할 수 있습니다.

제어되는 구성 요소와 제어되지 않는 구성 요소에 대해 이야기해 보겠습니다. 자세한 내용은 React 공식 웹사이트에서 이 소개를 참조할 수도 있습니다.

형태 측면에서, 제어되는 구성 요소는 양식 양식 구성 요소에 값 속성을 추가하는 것입니다. 제어되지 않는 구성 요소는 값 속성을 추가하지 않은 구성 요소입니다.

render: function() {
  return <input type="text" value="Hello!" />;
 }

값 속성이 있는 양식 구성 요소 요소 내부 추가된 is는 자체 상태를 유지하지 않습니다. 구성 요소의 값이 특정 값으로 설정되면 항상 이 값이 되므로 호출자가 구성 요소 값의 변경을 제어해야 합니다.

이러한 작성 방법은 문제를 가져옵니다. 사용자가 입력한 모든 값은 렌더링된 입력 구성 요소의 사용자 상호 작용 중에 작동하지 않으며 입력 상자의 값은 항상 Hello!입니다. 이는 HTML의 입력 동작과 일치하지 않습니다.

이 때문에 컴포넌트를 제어하려면 입력 컴포넌트의 값을 제어할 수 있어야 합니다. 즉, 컴포넌트 내부에서 상태가 유지되어야 합니다. 예를 들어, 위의 형식은 내부적으로 상태를 유지하는 inputItem 구성 요소로 캡슐화될 수 있습니다.

 export default class InputItem extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      value: ""
    }
  }

  componentWillReceiveProps(nextProps){
    this.setState({
      value: nextProps.value
    })
  }

  _onChange(evt){
    this.setState({
      value: evt.target.value
    })
  }

  render(){
    return (
      <input type="text" 
        value={this.state.value} 
        onChange={this._onChange.bind(this)}/>
    );
  }
}

여기에서

<InputItem value={this.state.userName} />

이러한 방식으로 React의 입력을 제어할 수 있습니다. Stateful 구성 요소는 내부적으로 상태를 유지할 수 있기 때문에 실제로 React의 Stateful 구성 요소를 사용하여 구성 요소를 완성해야 합니다.

Uncontrolled 컴포넌트

표현의 측면에서, 값 속성을 추가하지 않은 React의 폼 컴포넌트 요소는 제어되지 않는 컴포넌트입니다. 표현은 다음과 같습니다.

<input type="text" />

제어되지 않는 구성 요소는 기본 구현 중에 내부적으로 자체 상태를 유지합니다. 이는 사용자가 입력한 모든 값이 요소에 반영될 수 있음을 보여줍니다.

요약

React 컴포넌트를 사용할 때 제어되는 컴포넌트나 제어되지 않는 컴포넌트를 만나게 됩니다. 현재 React 컴포넌트에는 Stateless 컴포넌트를 사용하는 것이 좋지만 이 형식을 사용하여 React 컴포넌트를 구현할 때는 제어되지 않는 컴포넌트를 사용하세요. 제어되는 요소를 제어해야 한다면 문제가 있을 것입니다.

`Controlled Component`는 내부 상태를 적극적으로 유지해야 하지만 `stateless Component`는 상태를 유지할 필요가 없습니다. 구성 요소 상태입니다. 둘 사이에 충돌이 있습니다. 따라서 상태 비저장 구성 요소를 사용하여 제어 요소를 생성할 수 없습니다.

제어된 구성 요소와 비제어 구성 요소의 특성을 고려할 때 둘의 적용 영역도 주로 다음과 같습니다.

제어 요소는 일반적으로 초기 값을 동적으로 설정해야 하는 상황에서 사용됩니다. 예를 들어 일부 양식 정보를 편집할 때 입력 양식 요소는 처음에 서버에서 반환된 특정 값을 표시한 다음 이를 편집해야 합니다.

1. 제어되지 않은 요소는 일반적으로 동적 초기 값 정보가 없을 때 사용됩니다. 예를 들어 양식에서 정보를 생성할 때 입력 양식 요소에는 초기 값이 없고 사용자 입력이 필요합니다.

2. 위는 제가 컴파일한 것입니다. 여러분, 앞으로 모든 분들께 도움이 되었으면 좋겠습니다.
   관련 기사:

webpack 4.0.0-beta.0 버전의 새로운 기능(자세한 튜토리얼)

Vue 구성 요소 및 Route의 수명 주기(자세한 튜토리얼)

SpringMVC를 사용하여 vue 도메인 간 요청을 해결하세요

위 내용은 반응 제어 구성요소와 비제어 구성요소에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!