В реакции неконтролируемый компонент — это компонент, который не контролируется его родительским компонентом; неконтролируемый компонент — это независимый компонент, которому не нужно передавать значение и который не имеет никакого пересечения с родительским компонентом текущего компонента при инкапсуляции. только компонент Текущий компонент будет инкапсулирован как неконтролируемый компонент, если он используется только для отображения и не имеет никакого значения.
Операционная среда этого руководства: система Windows 10, версия 17.0.1, компьютер Dell G3.
Что такое неконтролируемый компонент?
Начнем с двух слов: компонент. Контролируемый и неконтролируемый — это понятия с точки зрения компонентов. Буквальный смысл заключается в том, что компоненты не контролируются, не контролируются никем, конечно, не родительским компонентом. характеристики неуправляемых компонентов? То есть вся логика связана только с самой собой и не имеет связи или пересечения с другими компонентами.
В HTML элементы формы, такие как , , поддерживают свое собственное состояние и обновляются в зависимости от пользовательского ввода. Но в React все эти компоненты являются неконтролируемыми компонентами без обработки, потому что когда вы их фактически используете, вы обнаружите, что эти компоненты не будут автоматически обновлять значение. Значение, которое мы вводим без какой-либо обработки, не позволяет получить значение, введенное с помощью.
Пример
import React, {Component } from 'react';import ReactDOM из 'react-dom';class Demo1 расширяет компонент { render() { return ( <input /> //<ABC /> ) }}ReactDOM.render(<Demo1 />, document.getElementById('content'))Объяснение неконтролируемых компонентов
Поскольку неконтролируемый компонент — это компонент, который не пересекается с внешним миром, мы больше не можем использовать неконтролируемые компоненты. Ответ — нет. В определенных обстоятельствах мы действительно можем использовать неконтролируемые компоненты.
Компонент карусели (неконтролируемый). Подумайте, нужен ли нашей странице компонент карусели, и этот компонент используется только один раз и не предназначен для повторного использования. Мы помещаем код карусели в компонент карусели. Нужен ли он компоненту карусели? нет необходимости взаимодействовать с внешним миром, поэтому, когда компонент карусели, который мы пишем, жестко запрограммирован независимо от того, как работает текущий график карусели, включая события кликов, время карусели и другие условия, тогда компонент карусели является неконтролируемым компонентом. Конечно, этот пример немного надуман. Когда мы создаем компоненты, нам нужен универсальный и многократно используемый компонент. Нам нужно знать текущий статус карусели, из-за которого наши неконтролируемые компоненты больше не будут применимы.
Разработка статических страниц. При разработке статических страниц мы обычно не используем фреймворки и используем HTML только для написания отдельных файлов. Производительность может быть лучше после упаковки. Но если определенная страница в нашем проекте является статической, будем ли мы ее использовать? Страницы, отображаемые нашими неконтролируемыми компонентами, не имеют инкапсуляции и могут быть только настраиваемыми страницами. Когда наши компоненты страниц существуют отдельно, они являются неконтролируемыми компонентами.
Неконтролируемый компонент — это независимый компонент, которому не нужно передавать значение и который не пересекается с родительским компонентом текущего компонента. Когда мы инкапсулируем компонент, он будет использоваться только тогда, когда текущий компонент предназначен только для отображения. и нет никакой разницы, инкапсулированной как неконтролируемый компонент.
Расширьте свои знания:
Что такое контролируемый компонент?
Это противоположность неконтролируемому компоненту. Буквально это означает компонент, который контролируется родительским компонентом. Он называется контролируемым компонентом.
То, как родительский компонент управляет дочерним компонентом, конечно, контролируется передачей значений, когда значение реквизита используется дочерним компонентом, а содержимое, метод или результат отображения дочернего компонента изменяются из-за значения, переданного родительским компонентом. , дочерний компонент — это контролируемые компоненты, контролируемые родительскими компонентами.
Пример
импортировать React, {Component} из «реагировать»; импортировать ReactDOM из «реагировать-dom»; класс Input расширяет компонент {constructor() { super(); this.state = {val:''}; handleChange=(event) =>{ let val = event.target.value; this.setState({val}) } render(){ return ( <div> <p>{this.state.val</p> //<input type= "text" value='123' /> <input type="text" value={this.state.val} onChange={this.handleChange} /> //Ввод — это управляемый компонент, управляемый свойствами объекта состояния </ div> ) }}ReactDOM.render(<Input/>,window.app)Мы не должны рассматривать входные данные как компонент ввода. Мы должны рассматривать входные данные как любой компонент, на который мы ссылаемся или инкапсулируем сами. После того, как этому компоненту передано нами значение, даже если это переданная нами фиксированная строка, по сути, он все равно остается. то же, что и входной компонент. Контролируемые компоненты, контролируемые компоненты не смотрят на то, существует ли двусторонняя привязка данных, а контролируются ли они по своей природе. Когда мы передаем фиксированное значение, значение входного компонента является фиксированным и не может. быть изменено, хотя мы передаем props — это жестко запрограммированное значение, но это значение по-прежнему управляет входным компонентом.
Пояснения к контролируемым компонентам
Управляемые компоненты фактически присутствуют во всех аспектах нашего программирования. Любой компонент, который мы используем отдельно, скорее всего, является контролируемым компонентом. В конце концов, спрос на статические страницы все еще невелик, и наш js большую часть времени обрабатывает логику, а затем логику. должен быть интерактивным.
Например, приведенный выше код компонента ввода эквивалентен текстовой области и компонентам выбора. Нам всем необходимо передать некоторые параметры (реквизиты), чтобы сообщить конкретные правила рендеринга и отобразить содержимое компонента. Например, атрибут type также является способом. чтобы мы могли контролировать компонент.
Двусторонняя привязка данных. Фактически, когда мы передаем какое-либо значение или атрибут значению, значение компонента изменяется на контролируемый компонент, но когда мы привязываем onChange, изменение данных передается нашему компоненту через onChange. В методе обратного вызова мы изменяем данные через setState для повторной визуализации. Это двусторонняя привязка данных. Данные управляют представлением, а представление управляет данными.
Краткое описание: Контролируемые компоненты и неконтролируемые компоненты — это концепция, которая указывает, является ли текущий компонент управляемым и является ли он отдельным компонентом, не взаимодействующим с другим контентом. Проще говоря, полностью независимый компонент можно рассматривать как неконтролируемый компонент, все остальные. компоненты контролируются