집 > 기사 > 웹 프론트엔드 > 반응 제어 구성요소와 비제어 구성요소에 대한 자세한 설명

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

小云云원래의: 2018-02-11 09:46:301529검색

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

1. 값을 자체 상태로 유지하는 0d8d8502ad9fc5bd029f7f31e30fdff5 컴포넌트는 외부에서 수정할 수 없습니다.

2. props를 통해 값을 설정하는 것은 외부 갱신을 통해서만 제어할 수 있습니다. .

최근 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의 양식 구성 요소를 기반으로 합니다. 자세한 내용은 React 공식 웹사이트에서 이 소개를 참조할 수도 있습니다.

제어 구성 요소

형태에 관해 제어되는 구성 요소는 값 속성을 추가하는 양식 구성 요소이고, 제어되지 않는 구성 요소는 값 속성이 추가되지 않은 구성 요소입니다.

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

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

이러한 작성 방법은 문제를 가져옵니다. 사용자가 입력한 모든 값은 렌더링된 입력 구성 요소의 사용자 상호 작용 중에 작동하지 않으며 입력 상자의 값은 항상 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 구성 요소를 다음과 같이 외부에서 호출할 수 있습니다.

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

이 방법으로 React의 입력 구성 요소를 제어할 수 있습니다. 실제로 이를 완료하려면 React의 Stateful 구성 요소를 사용해야 합니다. 내부적으로 상태를 유지할 수 있습니다.

Uncontrolled 컴포넌트

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

<input type="text" />

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

요약

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

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

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

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

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

관련 기사