React의 제어되는 구성 요소와 제어되지 않는 구성 요소에 대한 자세한 소개

이 글에서는 주로 React 심층 프로그래밍의 제어되는 구성 요소와 제어되지 않는 구성 요소를 소개하고 있습니다.

공식 홈페이지와 국내 홈페이지에는 통제되는 구성 요소와 통제되지 않는 구성 요소에 대한 정보가 많지 않습니다. 이는 다양한 규모의 프로젝트 요구 사항을 충족하는 React의 힘을 보여줍니다. 예를 들어 ListView와 같은 간단한 데이터 표시를 수행하고 데이터를 캡처하는 경우에는 for 루프와 {}이면 충분합니다. 그러나 백그라운드 시스템에는 많은 수의 보고서가 있고 다양한 양식이 함께 연결됩니다. 제어되는 구성 요소는 실제로 작동하지 않습니다.

제어되는 구성 요소와 제어되지 않는 구성 요소는 React가 양식을 처리하는 진입점입니다. React의 관점에서 작성자는 데이터가 모든 것을 제어하도록 놔두거나 페이지의 생성 및 업데이트가 JSX 명령을 충실히 실행해야 한다는 점을 단순히 이해해야 합니다.

그러나 양식 요소에는 고유한 특수 기능이 있습니다. 사용자는 키보드 입력 및 마우스 선택을 통해 인터페이스 표시를 변경할 수 있습니다. 인터페이스의 변경은 또한 일부 데이터가 변경되었음을 의미합니다. 더 분명한 것은 입력 값, 텍스트 영역의 innerHTML, 라디오/체크박스의 체크입니다. 덜 분명한 것은 selected 및 selectedIndex입니다. 수동적으로 수정되는 옵션입니다.

 <input value="{this.state.value}"/>

구성 요소의 state.value에서 input.value를 가져올 때 사용자가 입력을 수정한 후 JSX가 뷰를 다시 그리면 input.value가 사용자의 새 값을 가져오나요, 아니면 상태의 새 값을 가져오나요? 이러한 불일치를 바탕으로 React는 두 가지 모두가 지원하는 절충안을 제시했고, 오늘의 주제가 탄생했습니다.

React는 value/checked가 단독으로 존재할 수 없으며 onInput/onChange/disabed/readOnly 및 value/checked를 제어하는 ​​기타 속성이나 이벤트와 함께 사용해야 한다고 믿습니다. 이들은 함께 JSX에 의해 제어되는 제어되는 구성 요소를 형성합니다. 사용자가 이러한 추가 속성 및 이벤트를 작성하지 않으면 프레임워크는 내부적으로 onClick, onInput 및 onChange와 같은 일부 이벤트를 추가하여 사용자가 해당 값을 입력하거나 선택하지 못하게 하고 해당 값을 수정하지 못하게 합니다. 프레임워크 내부에는 JSX에 의해 마지막으로 할당된 값을 유지하고 내부 이벤트에 의해서만 수정될 수 있는 persistValue라는 완고한 변수가 있습니다.

그러므로 제어되는 구성요소는 이벤트를 통해 완성될 수 있는 가치의 제어라고 단언할 수 있습니다.

제어되는 구성 요소에서 persistValue는 항상 새로 고쳐질 수 있습니다.

제어되지 않은 구성요소를 다시 살펴보겠습니다. value/checked가 이미 사용 중이므로 React는 HTML에서 무시되는 또 다른 속성 세트인 defaultValue/defaultChecked를 활성화합니다. 일반적으로 value/checked와 유사하다고 생각됩니다. 즉, value가 존재하지 않는 경우 defaultValue의 값을 value로 간주합니다.

위에서 양식 요소의 표시는 내부 persistValue에 의해 제어되므로 defaultXXX도 persistValue를 동기화한 다음 persistValue가 DOM을 동기화한다고 말했습니다. 그러나 제어되지 않는 구성 요소의 시작점은 사용자 작업에 충실하는 것입니다. 코드에서 사용자가

input.value = "xxxx"

인 경우 더 이상 적용되지 않으며 항상 xxxx입니다.

이 작업을 수행하는 방법과 이 수정 사항이 프레임워크 내부에서 발생하는지 외부에서 발생하는지 식별하는 방법은 무엇입니까? React의 소스코드를 살펴보니 사용자 입력을 추적하는 valueTracker라는 것이 있더라구요

<input defaultvalue="{this.state.value}"/>

이건 Object.defineProperty를 통해 요소의 값에 입력/확인이 되기 때문에 사용자의 접근을 알 수 있습니다. 값 할당 작업입니다.

그러나 값/확인됨은 값을 원활하게 수정하기 위해 너무 많은 내부 메커니즘(예: 값 및 oninput, onchange, 입력 방법 이벤트 oncompositionstart,

compositionchange, oncompositionend, onpaste, oncut)을 포함하는 두 가지 매우 핵심 속성입니다. 선택하면

Object.getOwnPropertyDescriptor도 사용해야 합니다. IE8과 호환되려면 그러한 고급 가젯이 없습니다. 저는 또 다른 안전한 방법을 택합니다.

Object.defineProperty를 사용하여 defaultValue/defaultChecked를 수정합니다.

먼저 defaultXXX를 하이재킹했음을 나타내기 위해 요소에 _uncontrolled 속성을 추가합니다. 그런 다음 개체를 설명하는 set 메서드(Object.defineProperty의 세 번째 매개 변수)에 또 다른 스위치인 _observing을 추가합니다. 프레임 내에서 뷰가 업데이트되면 이 값은 업데이트 후 true로 설정됩니다.

이 방법을 통해 input.defaultValue = "xxx"가 사용자 또는 프레임워크에 의해 수정되었는지 알 수 있습니다.

var tracker = {
  getValue: function () {
   return currentValue;
  },
  setValue: function (value) {
   currentValue = '' + value;
  },
  stopTracking: function () {
   detachTracker(node);
   delete node[valueField];
  }
 };
 return tracker;
}

inputMonitor 구현은 다음과 같습니다

if (!dom._uncontrolled) {
  dom._uncontrolled = true;
  inputMonitor.observe(dom, name); //重写defaultXXX的setter/getter
}
dom._observing = false;//此时是框架在修改视图，因此需要关闭开关
dom[name] = val;
dom._observing = true;//打开开关，来监听用户的修改行为

코더들의 나쁜 버릇인 뇌를 태우는 코드를 실수로 올렸습니다. 그러나 이 시점에서는 공식적인 반응과 anu/qreact 모두 Object.defineProperty를 통해 사용자 입력을 제어한다는 점을 모두가 이해합니다.

따라서 다음 코드의 동작을 이해할 수 있습니다

export var inputMonitor = {};
var rcheck = /checked|radio/;
var describe = {
  set: function(value) {
    var controllProp = rcheck.test(this.type) ? "checked" : "value";
    if (this.type === "textarea") {
      this.innerHTML = value;
    }
    if (!this._observing) {
      if (!this._setValue) {
        //defaultXXX只会同步一次_persistValue
        var parsedValue = (this[controllProp] = value);
        this._persistValue = Array.isArray(value) ? value : parsedValue;
        this._setValue = true;
      }
    } else {
      //如果用户私下改变defaultValue，那么_setValue会被抺掉
      this._setValue = value == null ? false : true;
    }
    this._defaultValue = value;
  },
  get: function() {
    return this._defaultValue;
  },
  configurable: true
};
 
inputMonitor.observe = function(dom, name) {
  try {
    if ("_persistValue" in dom) {
      dom._setValue = true;
    }
    Object.defineProperty(dom, name, describe);
  } catch (e) {}
};

사용자가 defaultValue를 수동으로 수정하지 않았기 때문에 dom._setValue는 항상 false/정의되지 않았으므로 _persistValue는 언제든지 수정할 수 있습니다.

또 다른 예:

  var a = ReactDOM.render(<textarea defaultValue="foo" />, container);
  ReactDOM.render(<textarea defaultValue="bar" />, container);
  ReactDOM.render(<textarea defaultValue="noise" />, container);
  expect(a.defaultValue).toBe("noise");
  expect(a.value).toBe("foo");
  expect(a.textContent).toBe("noise");
  expect(a.innerHTML).toBe("noise");

일반 텍스트 클래스: text, textarea, JSX 값은 항상 문자열로 변환됩니다.

type="number" 컨트롤, 값이 채워지지 않았거나 "인 경우 값은 항상 숫자입니다. " "0"으로 변환

라디오는 연결 효과가 있습니다. 동일한 상위 노드 아래 동일한 이름을 가진 라디오 컨트롤은 하나만 선택할 수 있습니다.

Select의 value/defaultValue는 배열을 지원하며 변환을 수행하지 않습니다. 그러나 사용자가 아래 옵션 요소를 추가하거나 삭제하면 selected가 그에 따라 변경됩니다.

또한 선택은 퍼지 매칭과 완전 매칭으로 나눌 수 있습니다.

//精确匹配
var dom = ReactDOM.render(
  <select value={222}>
    <option value={111}>aaa</option>
    <option value={"222"}>xxx</option>
    <option value={222}>bbb</option>
    <option value={333}>ccc</option>
  </select>,
  container
);
expect(dom.options[2].selected).toBe(true);//选中第三个

//模糊匹配
var dom = ReactDOM.render(
  <select value={222}>
    <option value={111}>aaa</option>
    <option value={"222"}>xxx</option>
    <option value={333}>ccc</option>
  </select>,
  container
);
expect(dom.options[2].selected).toBe(true);//选中第二个

凡此种种，React/anu都是做了大量工作，迷你如preact/react-lite之流则可能遇坑。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue.js中如何实现数据分发slot

在Vue中有关使用ajax方法有哪些？

通过vue如何引入公共css文件

위 내용은 React의 제어되는 구성 요소와 제어되지 않는 구성 요소에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!