prefácio
"Página inicial do autor" : Sprite Youbai Bubbles
"Site pessoal" : Site pessoal de Sprite
"Coluna de recomendações" :
★ Serviço Java completo ★
★ Reagir da entrada à proficiência ★
★ Compartilhamento legal de código front-end ★
★ De 0 a herói, o caminho para o Vue se tornar um deus ★
★ uniapp - da construção à promoção ★
★ De 0 a herói, Vue se tornando um deus Estrada ★
★ Uma coluna é suficiente para resolver o algoritmo ★
★ Vamos falar sobre a arquitetura do 0 ★
★ A maneira requintada de circulação de dados ★
★ O caminho para back-end avançado ★
Diretório de artigos
1. Visão geral do React
React é uma biblioteca JavaScript declarativa, eficiente e flexível para construir interfaces de usuário. Usando o React, você pode combinar trechos de código curtos e independentes em interfaces de IU complexas. Esses trechos de código são chamados de "componentes".
Experimente Reagir Online Agora
Clique para ir para o endereço
Existem duas maneiras de escrever a estrutura do React, uma é o método de script (introdução da tag JavaScript, uso prático); o outro é o método de scaffolding react (comumente usado).
método de script
- Passo 1: Introduzir a biblioteca react e a biblioteca react-dom na página;
Para a etapa 1 , você pode usar o seguinte código na página para importar a biblioteca react e a biblioteca react-dom:
<script crossorigin src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script>
Certifique-se de 17.0.2substituir pela versão do React que você deseja usar.
- Passo 2 : Introduza o Babel; a sintaxe do JSX é usada no React, mas o navegador não reconhece o JSX, então precisamos introduzir o babel
Para a etapa 2, você pode usar o seguinte código para importar o Babel e usar a sintaxe JSX:
<script src="https://cdn.jsdelivr.net/npm/@babel/[email protected]/babel.min.js"></script>
<script type="text/babel">
// 在此处编写React组件和代码
</script>
Você também pode optar por usar o Babel como uma dependência de desenvolvimento e usar o Babel para compilações de projetos. Isso permite um melhor suporte para a sintaxe ES6+ e mais plugins Babel.
- Passo 3 : Crie um ponto de montagem.
Para a etapa 3, você pode criar um elemento div com um id específico no HTML como um ponto de montagem para o componente React. Por exemplo:
<div id="root"></div>
Você pode rootsubstituir por qualquer nome que desejar.
Depois de concluir as etapas acima, você pode começar a escrever componentes React e renderizá-los no ponto de montagem.
exemplo completo
Este é um exemplo de código completo, incluindo a importação da biblioteca React, importação do Babel, criação de um ponto de montagem e um componente React simples:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React App</title>
<script crossorigin src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@babel/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// 创建一个名为Greeting的React组件
function Greeting(props) {
return <p>Hello, {
props.name}!</p>;
}
// 渲染Greeting组件到页面上的根元素
ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));
</script>
</body>
</html>
No código acima, importamos a versão de produção da biblioteca React e da biblioteca ReactDOM e usamos o Babel para analisar o código JSX incorporado. Em seguida, criamos um rootdiv com id na página como ponto de montagem do componente React.
Em seguida, definimos um componente React chamado Greeting que recebe propsuma namepropriedade chamada Greeting e retorna um elemento contendo a saudação p.
Por fim, usamos ReactDOM.rendero método para renderizar o componente Greeting no ponto de montagem da página. Neste exemplo, o componente Saudação exibirá "Hello, John!". Você pode modificar os valores de propriedade do componente conforme necessário.
andaimes
Etapa 1 - Criar um objeto DOM virtual
// 创建虚拟DOM对象
const vNode = React.createElement(
// 标签名
"div",
// 属性对象
{
id: "mydiv",
className: "cls",
},
// 标签内的内容
"hello react!"
);
Passo 2 - Obter o ponto de montagem
// 获取挂载点
const root = document.getElementById("root");
Passo 3 - Renderizar a página
// 渲染页面
ReactDOM.render(vNode, root);
código completo
O código completo é o seguinte:
<!DOCTYPE html>
<html>
<head>
<title>React 封装演示</title>
<script src="https://cdn.jsdelivr.net/npm/react/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.development.js"></script>
</head>
<body>
<!-- 挂载点：后续生成的内容插入这里 -->
<div id="root"></div>
<script type="text/javascript">
// 步骤1 - 创建虚拟DOM对象
const vNode = React.createElement(
// 标签名
"div",
// 属性对象
{
id: "mydiv",
className: "cls",
},
// 标签内的内容
"hello react!"
);
// 步骤2 - 获取挂载点
const root = document.getElementById("root");
// 步骤3 - 渲染页面
ReactDOM.render(vNode, root);
</script>
</body>
</html>
O código acima é renderizado em HTML puro, e você pode ver o componente React renderizado diretamente abrindo-o no navegador. No código, as versões de desenvolvimento do React e ReactDOM são introduzidas pela primeira vez. Em seguida,
<div id="root"></div>o ponto de montagem é definido na guia. Em seguida, useReact.createElement()o método para criar um objeto DOM virtual e defina o nome da tag, o objeto de atributo e o conteúdo da tag. Por fim,document.getElementById("root")obtenha o ponto de montagem e useReactDOM.render()o método para renderizar o objeto DOM virtual no ponto de montagem. Dessa forma, uma tag div com os atributos "id" e "className" será renderizada na página e o conteúdo será "hello
react!".
Componente é um conceito muito importante no React, ele é responsável por dividir a página em partes independentes e reutilizáveis, podendo exibir conteúdo dinamicamente de acordo com diferentes inputs (props).
2. Componentes
Os componentes são conceitualmente semelhantes às funções JavaScript. Ele aceita qualquer parâmetro de entrada (props") e retorna o elemento React usado para descrever o conteúdo exibido na página. Existem duas maneiras de definir componentes no React
Componentes funcionais
Os componentes funcionais são uma nova sintaxe adicionada após o React 16.8. É uma maneira simples e leve de definir componentes. Podemos usar uma função para declarar um componente, receber um parâmetro props e retornar um elemento React para descrever o conteúdo de exibição da página.
Aqui está um código de exemplo para um componente funcional simples:
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
// 使用该组件
const element = <Welcome name="John" />;
ReactDOM.render(
element,
document.getElementById('root')
);
No código acima, definimos um componente de função chamado Welcome, que recebe um parâmetro props, que pode conter quaisquer propriedades. Dentro do componente, podemos usar as propriedades do objeto props para exibir dinamicamente o conteúdo da página.
componentes de estilo de classe
Os componentes de classe são uma maneira mais tradicional e poderosa de definir componentes no React. Podemos definir um componente usando uma classe que herda React.Component e implementa um método render para retornar elementos React.
Aqui está um exemplo de código para um componente de estilo de classe simples:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
// 使用该组件
const element = <Welcome name="John" />;
ReactDOM.render(
element,
document.getElementById('root')
);
No código acima, definimos um componente de classe chamado Welcome, que herda React.Component e implementa um método render para descrever o conteúdo de exibição do componente. No método render, podemos obter as propriedades recebidas por meio de this.props e usá-las para exibir o conteúdo dinamicamente.
Seja uma função ou uma classe, um componente é uma função ou classe que recebe props e retorna um elemento React. Eles podem exibir conteúdo diferente de forma flexível de acordo com diferentes props, de modo a alcançar a componentização e a reutilização de páginas.
3. Eventos
A manipulação de eventos no React é muito semelhante à manipulação de eventos para elementos DOM, com algumas diferenças sintáticas. O React usa camelCase para definir eventos e precisa passar uma função como o manipulador de eventos em vez de uma string. Fazer isso garante que os manipuladores de eventos sejam devidamente vinculados e executados nos componentes React.
React manipula o evento click
Aqui está um exemplo de código para lidar com eventos de clique com o React:
class Button extends React.Component {
handleClick() {
console.log('Button clicked');
}
render() {
return <button onClick={this.handleClick}>Click me</button>;
}
}
ReactDOM.render(<Button />, document.getElementById('root'));
No código acima, criamos um componente Button e retornamos um
<button>elemento no método render do componente. No<button>
elemento, passamos uma funçãothis.handleClickcomo manipulador para o evento click por meio do atributo onClick.Quando o botão é clicado, o manipulador de eventos
handleClické chamado e uma mensagem de log é gerada.Deve-se notar que no React, os manipuladores de eventos são vinculados automaticamente às instâncias do componente. Portanto, você pode usar no manipulador de eventos
thispara se referir à instância do componente.
Há também outra maneira de usar funções de seta para acessar instâncias de componentes em manipuladores de eventos.
função de seta
Aqui está um exemplo de código para manipulação de eventos usando funções de seta:
class Button extends React.Component {
handleClick = () => {
console.log('Button clicked');
}
render() {
return <button onClick={this.handleClick}>Click me</button>;
}
}
ReactDOM.render(<Button />, document.getElementById('root'));
No código acima, usamos o atributo class para definir a função de manipulação de eventos, o que pode garantir que o interno da função de seta seja
thisconsistente com a instância do componente.
Para resumir, o tratamento de eventos no React tem algumas diferenças de sintaxe em relação ao tratamento de eventos de elementos DOM, mas a ideia geral é muito semelhante. Podemos lidar com vários eventos de interação do usuário em componentes React usando pequenos métodos de nomenclatura camel-case e passando funções como manipuladores de eventos.
resumo
Neste artigo, começamos com uma visão geral do React, uma biblioteca JavaScript para construir interfaces de usuário. Também abordamos maneiras de instalar e executar o React usando scripts e scaffolding.
Em segundo lugar , discutimos o conceito de componentes React e duas maneiras de definir componentes: o modo de função e o modo de classe. O método function é uma nova sintaxe adicionada após o React 16.8, que é mais simples e leve. O método de classe é uma maneira tradicional e poderosa de definir componentes em React.Ele herda React.Component e implementa o método render para descrever o conteúdo de exibição do componente.
Por fim , aprendemos como lidar com eventos no React. A manipulação de eventos do React é semelhante à dos elementos DOM, com algumas diferenças sintáticas. Os eventos React são nomeados em camel case, e uma função precisa ser passada como o manipulador de eventos.
