Reagir a introduzir arquivos básicos de introdução e JS, ReactDOM.render () para processar a página, para evitar ataques XSS, paradigmas de programação, o uso JSX / gramática / comentário / tipo de dados de saída / uso expressões na propriedade, JSX lista de renderização e condições de renderização .
introdução básica 1.react
Uma biblioteca JavaScript para a construção de interfaces de usuário.
1.1 Origens
`React` originou dentro do project` Facebook` porque a empresa é tudo framework JavaScript MVC no mercado, não estão satisfeitos, eles decidiram escrever um conjunto, fazê-lo mais tarde, descobriram este material é útil, em 2013 pode abrir fonte, em seguida, mais e mais pessoas começaram a prestar atenção e use `React`,` React` lentamente se tornar um dos quadro de desenvolvimento front-end para os mais populares.
1.2 Características
- - `React` usa um paradigma de programação declarativa , você pode construir aplicações UI` mais convenient`
- - dentro do pacote mais eficiente para interagir com o subjacente `DOM` lógica para melhorar o desempenho ao mesmo tempo, nos ajudando a se concentrar mais no negócio
- - pode ser um bom quadro ou outras bibliotecas com os mesmos recebem acasalamento
balde família 1.3React
- - `React`: fornece uma estrutura (biblioteca) funcionalidade do núcleo, como assembly`` `DOM` virtual, renderização
- - `criar-reagem-app`: andaimes, fornecendo um conjunto de ferramentas para a construção rápida e packaging` projeto React`
- - `reagem-router`:` React` base biblioteca roteamento
- - `redux, reagem-redux`: biblioteca de gerenciamento de estado
Coloque a introdução de 2.React
- - modelo <script> baseada em navegador
- - um modo de automação baseada ambiente integrado
2.1 modelo <script> baseada em navegador
React.js quadro em si compreende dois porções
- - react.js : React.js fornecem a funcionalidade central do código, tais como: os dom virtual, componentes
- - REAGIR-dom.js : proporciona interação com as funções DOM do navegador, tais como: prestação dom
Apresentando suas próprias baixar react.js e reagem-dom.js arquivo :
html:
<body>
<div id="app"></div>
<script src="./js/react.production.min.js"></script>
<script src="./js/react-dom.production.min.js"></script>
<script src="js/app.js"></script>
</body>Ele também pode ser introduzido e se Reagir ReactDOM pela versão CDN UMD :
Ambiente de desenvolvimento:
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>Essas versões usadas somente ambiente de desenvolvimento não é adequada para ambientes de produção. Reagir versão comprimida pode ser usada para a optimização pode ser produzido por meio de referência:
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>CDN introduzido por meio de reagir, o funcionário recomendou ao conjunto crossorigin se a propriedade também é recomendado para verificar o uso de CDN conjunto Access-Control-Allow-Origin: * solicitação HTTP, isso pode ter melhor em Reagir 16 e acima de versões da experiência de tratamento de erros .
exemplo:
html:
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="js/app.js"></script>
</body>JS:
ReactDOM.render(
'<div>开课吧</div>',
document.getElementById('app')
);Resultados: Todo o conteúdo será processado e etiqueta tudo
Motivo: interno Reagir usar innerText vez de innerHTML render (para evitar ataques XSS)
texto correto: Reagir necessidade de usar o formato JPX proprietária pode ser processado, e a necessidade de introduzir JS para arquivos do tipo uso text / babel babel e JS e prestados por babel
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel" src="js/app.js"></script>
</body>ReactDOM.render(
<div>开课吧</div>,
document.getElementById('app')
);Nota: Rendering usando o formato JPX, é uma página babel via ajax dentro para visita, ele deve estar em execução para acessar corretamente a página no servidor. Caso contrário, será erro:
Solução: Se você realmente editor VSCode onde você pode baixar plug-ins, servidor ao vivo pode;
2.2ReactDOM.render () analisa Método
ReactDOM.render (elemento, o recipiente [, chamada de retorno]) :
- elemento: para processar o conteúdo
- recipiente: Para processar o conteúdo de recipientes de armazenamento (uma página do nó)
- callback: Após a renderização função de retorno
ataques de injeção 2.3XSS
A fim de prevenir eficazmente `ataques de injeção XSS`,` Reagir DOM` vai conteúdos (cadeia de caracteres) escaparam durante o processamento, a seqüência de etiquetas não é um `processamento rótulo HTML`.
XSS ataca exemplo: através de uma forma de método innerHTML seria mudar os rótulos em uma variedade de HTML, estilo, JS, etc., é extremamente inseguro.
<style>
#app {
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
document.querySelector("#app").innerHTML = '<style>#app {width: 100px;height: 100px;background:green;}</style>';
</script>
</body>3. Programação Paradigm
A programação é um modelo, algumas das paradigma de programação mais populares:
- - programação imperativa
- - Programação Declarativa
- - Programação Funcional
3.1 programação imperativa
Dizer ao computador como fazer (como?) - Processo
No JavaScript nativa, programação de interface do usuário é usada para construir um tipo de comandos para concluir a programação.
let shadow = this.attachShadow({mode: 'open'});
let style = document.createElement('style');
style.textContent = `span {color:red}`;
let span = document.createElement('span');
span.innerHTML = '我是自定义元素的内容';
span.classList.add('cred');
shadow.appendChild(style);
shadow.appendChild(span);3.2 Programação Declarativa
Informa ao computador o que queremos (o quê?) - resultados
Como instrução SQL e HTML:
SELECT * FROM `USER` WHERE `gender`='男' ORDER BY `age` DESC;A descrição acima é uma típica programação declarativa SQL, banco de dados disse, eu quero o que resultados saem a forma como os resultados da consulta, o processo de como conseguir o tipo de SQL não se importa, é implementado dentro (em baixo).
Outro exemplo é o método seguinte (aqui também incluem programação funcional):
['k',1,2,'k',true,'b'].filter(v => Number.isFinite(v)).map(v=>v*10).reduce((c, v)=>c + v, 0);3.3React.js em UI declarativa
<span className="cred">我是自定义元素的内容</span>Objetos 4.DOM e DOM Virtual
objetos 4.1DOM
DOM: Documento Object Model, o conteúdo do documento (um grupo de caracteres, há um grupo de formato de caracteres) é resolvido para um objecto em formato JS, e também fornece um número de propriedades e métodos para manipular estes objectos, e operações sobre esses objectos e sincroniza o feedback (atualizado) para os objetos correspondentes no HTML.
elementos da página do navegador serão mapeados para objetos em JavaScript, por correspondência para obter acesso a esses objetos e elementos do conteúdo da página em JavaScript. Enquanto isso, algumas operações desses objetos, a página será alimentada de volta para os elementos correspondentes acima.
No entanto, o conteúdo do objeto nativo JavaScript DOM ea estrutura é muito complexo, há muitas características que raramente usados, e vamos operar em objetos de feedback imediato para a página (rendering), afetar o desempenho. Portanto reagir usando DOM virtual.
html:
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel" src="virtualDom.js"></script>
</body>console.dir(document.querySelector("#app"));Resultados: todas as suas propriedades e métodos objeto DOM nativa correspondente.
4.2 DOM virtual
DOM virtual, o objeto de referência é um objeto DOM nativa construída, sua estrutura é bastante simples, além de otimizar a lógica de processamento para reduzir a influência trazida pelo desempenho mudança de renderização.
HTML:
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel" src="virtualDom.js"></script>
</body>JSX:
// console.dir(document.querySelector("#app"));
const App = (
<div>
<h1>开课吧</h1>
<p>web前端高级工程师</p>
</div>
);
console.dir(App);
ReactDOM.render(
App,
document.querySelector("#app")
);Gerado estrutura DOM virtual é a seguinte: encontrar um imóvel adereços DOM virtual; adereços aqui são crianças, incluindo toda a estrutura HTML a crianças; crianças e têm os seus próprios adereços, ainda adereços sob as crianças, até que finalmente não há conteúdo. Vários depois reagir são operados por um DOM virtual.
uso 5.JSX
`JSX` é baseado on` JavaScript` +` XML` uma sintaxe estendida.
- - ele pode usar como um `` valor
- - não é um `` corda
- - não é um `HTML`
- - Ele pode ser usado em conjunção com a expressão `` JavaScript
Necessidade de introduzir biblioteca de babel, o interior é de biblioteca de babel para analisar o arquivo app.js de entrada, e, em seguida, renderização. Use arquivo de biblioteca babel, a rede não iria solicitar o arquivo para app.js carga apresentou-se, mas para ser carregado por ajax biblioteca de babel assíncrono e cargas sobre o primeiro analisado pelo código JS em babel, então browse ele é processado.
js / app.js: JSX
ReactDOM.render(
<div>开课吧</div>,
document.getElementById('app')
);JSX introduziu a análise da biblioteca : Babel-standalone.js: processamento no navegador `JSX`
html:
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel" src="js/app.js"></script>> Nota: Se o código contém `JSX` contido ou introduced` JSX`,` tipo` necessidade de definir o rótulo do script` attribute`: `text / babel`
const App = (
<div>
<h1>开课吧</h1>
<p>web前端高级工程师</p>
</div>
);regras gramaticais 6.JSX
6.1 Estrutura
Cada indivíduo `JSX` estrutura superior tem um único elemento pai e um alto nível
JSX:
// 错误
const App = (
<div>
<h1>开课吧</h1>
<p>web前端高级工程师</p>
</div>
<div>第二个</div>
);// 正确
const App = (
<div>
<div>
<h1>开课吧</h1>
<p>web前端高级工程师</p>
</div>
<div>第二个</div>
</div>
);6,2 na express incorporado no JSX
- `JXS` pode ser utilizado nas {} expressões incorporados expression` JavaScript`
Expressão: um conjunto de códigos para produzir um conjunto de valores.
- - variável
- - Aritmética
- - Chamada de função
- - ......
se, ao mesmo tempo, para, etc. essa afirmação, declaração JXS não é suportado .
exemplo:
HTML:
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel" src="jsx.js"></script>
</body>JS:
let name = "kaikeba";
let title = "welcome to kaikeba";
const App = (
<div>
<h1>{name}</h1>
<p>{title}</p>
</div>
);
ReactDOM.render(
App,
document.querySelector("#app")
);resultados:
- Nota: distinguir a diferença entre expressões e declarações, IF, para, ao mesmo tempo estas declarações, JSX não suporta a declaração .
<h1>{if (true) {...}</h1> // 错误7.JSX Exemplo Sintaxe
Em `JSX`, a expressão do tipo de conteúdo de saída e o local de uso, há algumas diferenças
Os 7.1JSX comentários
<div>
{/*注释*/}
{/*
多行注释
*/}
</div>Saída tipo de dados expressão 7.2JSX
- - cordas, números: é emitido
- - Disposição: traduzido em cordas. É equivalente à utilização de uma matriz .join ( '') , isto é, uma cadeia vazia em vez de os JS ligação padrão vírgula
- - outros objetos não diretamente saída .
- - valor booleano, vazio, indefinido é ignorado
Matriz: uma matriz de expressão encontrado saída JSX, irá ser ligado a uma cadeia de elementos.
let arr = [2,7,3,4];
const App1 = (
<div>
{/*JSX输出数据类型：数组*/}
<p>{arr}</p>
</div>
);
ReactDOM.render(
App1,
document.querySelector("#app")
);Outros objetos: Saída directa vai reclamar
{/*JSX输出数据类型：其他对象*/}
let obj = {name:'lmf',age:23};
const App2 = (
<div>
<p>{obj}</p>
</div>
); 
Ele deve ser convertido para um array de objetos, reexportação:
//JSX对象不能直接输出，需要转为数组后才能输出
let obj = { name: 'lmf', age: 23 };
let zMouse = {
name: '子鼠',
gender: '男',
skills: ['JavaScript', 'Node.js'],
interests: ['音乐', '足球', '编程']
};
function getObj(obj){
let arr = [];
for(let k in obj){
arr.push(<li key={k}>{k}:{
Array.isArray(obj[k]) ? Object.keys(obj[k]).map(item => {
return <ul><li key={item}>{obj[k][item]}</li></ul>
}) : obj[k]
}</li>)//注意此处使用了JSX语法，所以取值必须使用{k}
}
return arr;
}
const AppCont = (
<div>
<p>对象转为数组输出：{Object.keys(obj).map((k, v) => { return k + ': ' + obj[k] + '; ' })}</p>
对象转为数组输出(先通过方法生成列表循环数组，再调用方法(注意也需要在{}中进行调用)进行显示)：
{getObj(zMouse)}
对象循环列表输出：
{/*注意：不能使用数组作为唯一key，['JavaScript', 'Node.js']没有可作为key的，[name:'JavaScript', remark:'较难']可将arr.name或arr.remark作为唯一key*/}
<ul>
{Object.keys(zMouse).map((k) => {
return <li key={k}>{k}:{
Array.isArray(zMouse[k]) ? Object.keys(zMouse[k]).map(item => {
return <ul><li key={item}>{zMouse[k][item]}</li></ul>
}) : zMouse[k]
}</li>
})}
</ul>
</div>
);
ReactDOM.render(
AppCont,
document.querySelector("#app")
);resultados:
valor booleano, vazio, indefinido é ignorada:
{/*JSX输出数据类型：布尔值，空或未定义*/}
const App3 = (
<div>
true:{true}
<br/>
undefined:{undefined}
<br/>
空:{}
</div>
);
ReactDOM.render(
App3,
document.querySelector("#app")
);resultados:
7.3 Usar expressões na propriedade
As expressões JSX também pode ser usado na propriedade, mas precisa prestar atenção quando em uso
- Quando usado em um atributo {}, não citar
JSX:
let id = 'kaikeba';// 错误
const App = (
<div id="{id}"></div>
);// 正确
const App = (
<div id={id}></div>
);- JSX está mais interessado em JavaScript, então por alguma propriedade especial, usando o estilo de nome de propriedade JavaScript. como className
JSX:
// 错误
const App = (
<div class="box1"></div>
);// 正确
const App = (
<div className="box1"></div>
);- Para mais elementos de estilo operação conveniente, com tratamento especial para o estilo desta propriedade. objetos de estilo em várias propriedades é escrito na forma
const App = (
<div style={{width: '100px', height: '100px', color:'red'}}></div>
);Nota: Aqui dois {{}}, cintas externas indica a frente do referido sintaxe cintas expressão , dentro das chaves é o objecto da cinta
NOTA: Ao usar a expressão na propriedade pode ser a saída diretamente para um formato de objeto de dados, mas a saída de objetos diretamente na expressão dada
Você também pode usar as seguintes formas:
let skin = {width: '100px', height: '100px', color:'red'};
const App = (
<div style={skin}></div>
);lista prestação 8.JSX
Se precisar de uma lista de renderização para renderizar um conjunto de dados, podemos atravessar (percorrer um array, variável de objeto ......) e outras operações, retorna um conjunto de JSX.
** Dados **:
let zMouse = {
name: '子鼠',
gender: '男',
skills: ['JavaScript', 'Node.js'],
interests: ['音乐', '足球', '编程']
};8.1 matriz
function getSkills() {
return (
<ul>
{zMouse.skills.map(skill => <li>{skill}</li>)}
</ul>
);
}
const App = (
<div>{getSkills()}</div>
);ou
const App = (
<div>
<ul>
{zMouse.skills.map(skill => <li>{skill}</li>)}
</ul>
</div>
);8.2 objeto
Objectos precisa de ser convertido para uma matriz
//JSX对象不能直接输出，需要转为数组后才能输出
let obj = { name: 'lmf', age: 23 };
let zMouse = {
name: '子鼠',
gender: '男',
skills: ['JavaScript', 'Node.js'],
interests: ['音乐', '足球', '编程']
};
function getObj(obj){
let arr = [];
for(let k in obj){
arr.push(<li key={k}>{k}:{
Array.isArray(obj[k]) ? Object.keys(obj[k]).map(item => {
return <ul><li key={item}>{obj[k][item]}</li></ul>
}) : obj[k]
}</li>)//注意此处使用了JSX语法，所以取值必须使用{k}
}
return arr;
}
const AppCont = (
<div>
<p>对象转为数组输出：{Object.keys(obj).map((k, v) => { return k + ': ' + obj[k] + '; ' })}</p>
对象转为数组输出(先通过方法生成列表循环数组，再调用方法(注意也需要在{}中进行调用)进行显示)：
{getObj(zMouse)}
对象循环列表输出：
{/*注意：不能使用数组作为唯一key，['JavaScript', 'Node.js']没有可作为key的，[name:'JavaScript', remark:'较难']可将arr.name或arr.remark作为唯一key*/}
<ul>
{Object.keys(zMouse).map((k) => {
return <li key={k}>{k}:{
Array.isArray(zMouse[k]) ? Object.keys(zMouse[k]).map(item => {
return <ul><li key={item}>{zMouse[k][item]}</li></ul>
}) : zMouse[k]
}</li>
})}
</ul>
</div>
);
ReactDOM.render(
AppCont,
document.querySelector("#app")
);ou
const App = (
<div>
<ul>
{Object.keys(zMouse).map(key => <li>{key}</li>)}
</ul>
</div>
);8.3key
Por padrão, Reagir Para o desempenho, a estrutura irá reutilizar tanto quanto possível, uma lista de estrutura variável para o mesmo grupo, a fim de problemas evitar com alguns aspectos da aparência, geralmente, dão cada lista para adicionar uma chave única. Esta chave é geralmente usado para identificar exclusivamente dados de identificação.
<ul>
{[{id:1,name:'zMouse',id:2,name:'MT'}].map(user => <li key={user.id}>{user.name}</li>)}
</ul>Nota: O valor para a chave não é recomendado o uso de um índice de matriz, porque não há nenhum índice de matriz e os dados de ligação.
9.JSX condições de renderização
function moreInterests() {
if (zMouse.interests.length > 2) {
return <a href="#">更多</a>
}
}
const App = (
<div>
爱好：{zMouse.interests.map(interest=>{
return <span style={{marginRight:"10px"}}>{interest}</span>
})}
{moreInterests()}
</div>
);9.1 operador ternário
const App = (
<div>
爱好：{zMouse.interests.map(interest=>{
return <span style={{marginRight:"10px"}}>{interest}</span>
})}
{zMouse.interests.length > 2 ? <a href="#">更多</a> : null}
</div>
);Ou operador com 9,2
const App = (
<div>
爱好：{zMouse.interests.map(interest=>{
return <span style={{marginRight:"10px"}}>{interest}</span>
})}
{zMouse.interests.length > 2 && <a href="#">更多</a>}
{zMouse.interests.length < 4 || <a href="#">更多</a>}
</div>
);
