No react, um componente não controlado é um componente que não é controlado por seu componente pai. Um componente não controlado é um componente independente que não precisa passar um valor e não possui nenhuma interseção com o componente pai do componente atual; um componente, apenas O componente atual será encapsulado como um componente não controlado quando for usado apenas para fins de exibição e não fizer nenhuma diferença.
O ambiente operacional deste tutorial: sistema Windows 10, react versão 17.0.1, computador Dell G3.
O que é um componente não controlado?
Começamos com duas palavras, ou seja, componente controlado e não controlado são conceitos da perspectiva dos componentes. O significado literal é que os componentes não são controlados, não são controlados por ninguém, claro, não pelo componente pai. as características dos componentes não controlados? Ou seja, toda lógica está relacionada apenas consigo mesma e não tem comunicação ou interseção com outros componentes.
Em HTML, elementos de formulário como , e mantêm seu próprio estado e são atualizados com base na entrada do usuário. Mas no React, esses componentes são todos componentes não controlados e sem processamento, porque quando você realmente os usa, você descobrirá que esses componentes não atualizarão automaticamente o valor que inserimos sem qualquer processamento. Não é possível obter o valor inserido usando.
Exemplo
import React, { Component } from 'react';import ReactDOM from 'react-dom';class Demo1 estende Componente { render() { return ( <input /> //<ABC /> ) }}ReactDOM.render(<Demo1 />, document.getElementById('conteúdo'))Explicação de componentes não controlados
Como um componente não controlado é um componente que não tem intersecção com o mundo exterior, não podemos mais usar componentes não controlados. A resposta é não.
Componente carrossel (não controlado), pense se nossa página precisa de um componente carrossel, e o componente é usado apenas uma vez e não se destina a ser reutilizado. Colocamos o código do carrossel em um componente carrossel. não é necessário interagir com o mundo exterior, portanto, quando o componente do carrossel que escrevemos é codificado, independentemente de como o gráfico do carrossel atual é executado, incluindo eventos de clique, tempo do carrossel e outras condições, então o componente do carrossel é um componente não controlado, de. claro, este exemplo é um pouco rebuscado. Quando fabricamos componentes, devemos querer um componente universal e reutilizável. Precisamos saber o status atual do carrossel, o que fará com que nossos componentes não controlados não sejam mais aplicáveis.
Desenvolvimento de páginas estáticas. Ao desenvolver páginas estáticas, geralmente não usamos frameworks e apenas usamos HTML para escrever arquivos separados. Mas se uma determinada página em nosso projeto for uma página estática, iremos usá-la. As páginas exibidas por nossos componentes não controlados não possuem encapsulamento e só podem ser páginas customizadas. Quando nossos componentes de página existem sozinhos, eles são componentes não controlados.
Um componente não controlado é um componente independente que não precisa passar um valor e não possui nenhuma interseção com o componente pai do componente atual. Quando encapsularmos o componente, ele só será usado quando o componente atual for apenas para fins de exibição. e não há diferença.
Amplie seu conhecimento:
O que é um componente controlado?
Isto é o oposto de um componente não controlado. Significa literalmente um componente que é controlado por um componente pai. É chamado de componente controlado.
A forma como o componente pai controla o componente filho é obviamente controlada pela passagem de valores. Quando o valor props é usado pelo componente filho, e o conteúdo ou método ou resultado de exibição do componente filho é alterado devido ao valor passado pelo componente pai. , o componente filho é um componente controlado controlado pelos componentes pai
Exemplo
importar React,{Component} de 'react';importar ReactDOM de 'react-dom';class Input estende Componente{ construtor(){ super(); =>{ 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} /> //A entrada é um componente controlado controlado pelas propriedades do objeto de estado </ div> ) }}ReactDOM.render(<Input/>,window.app)Não devemos considerar a entrada como um componente de entrada. Devemos considerar a entrada como qualquer componente que referenciamos ou encapsulamos. Depois que esse componente recebe um valor por nós, mesmo que seja uma string fixa passada por nós, ele ainda é essencialmente o. assim como os componentes de entrada, os componentes controlados não verificam se há ligação bidirecional de dados, mas se são controlados por natureza. Quando passamos um valor fixo, o valor do componente de entrada é fixo e não pode. ser modificado, embora passemos props como um valor codificado, mas esse valor ainda controla o componente de entrada.
Explicação dos componentes controlados
Na verdade, componentes controlados aparecem em todos os aspectos da nossa programação. Qualquer componente que retiramos sozinho é provavelmente um componente controlado. Afinal, a demanda por páginas estáticas ainda é pequena e nosso js lida com a lógica na maior parte do tempo. deve ser interativo.
Por exemplo, o código do componente inpu acima é equivalente aos componentes textarea e select. Todos nós precisamos passar alguns parâmetros (props) para informar as regras de renderização específicas e exibir o conteúdo do componente. para controlarmos o componente.
Vinculação bidirecional de dados: Na verdade, quando passamos qualquer valor ou atributo para valor, o significado do componente foi alterado para um componente controlado, mas quando vinculamos onChange, uma alteração de dados é dada ao nosso componente por meio de onChange. No método de retorno de chamada, alteramos os dados por meio de setState para renderizar novamente. Esta é a ligação bidirecional dos dados. Os dados orientam a visualização e a visualização orienta os dados.
Resumo: Componentes controlados e componentes não controlados são um conceito que indica se o componente atual é controlado e se é um componente separado que não interage com outro conteúdo. Simplificando, um componente completamente independente pode ser visto como um componente não controlado, todos os outros. componentes são controlados