Primeiro de tudo, antes de aprender essa estrutura, você precisa entender o seguinte conhecimento:
1. Native JS Basics
2. CSS Basics
3.NPM Pacotes Gerenciamento básico
4. Webpack Build Project Basics
5.Es6 Especificações
Os cinco pontos de conhecimento acima também são pré-tarefas que devem ser entendidos para aprender outras estruturas de front-end.
Não vou dizer muito sobre JS e CSS. O NPM é a ferramenta de gerenciamento de pacotes mais defendida e dominante no momento. Você pode considerá -lo se ainda estiver usando o Bower ou outras ferramentas. Como uma nova geração de ferramentas de embalagem, o Webpack já dominou as ferramentas de embalagem front-end e tem uma grande vantagem em comparação com o navegador. Quanto à especificação ES6, embora os principais navegadores não sejam compatíveis agora, eles podem ser convertidos usando conversores como Babel.
Combinando algumas outras estruturas de front-end principal, eu pessoalmente acredito que há três coisas básicas para criar aplicativos de uma página: componentes, roteamento e gerenciamento de estado . Em seguida, apresentarei o React com base nesses três, é claro que haverá alguns pontos de conhecimento adicionais intercalados lá.
Componentes
A escrita e a chamada de componentes do React depende principalmente da modularidade do ES6 e da sintaxe JSX. Aqui está um exemplo:
// main.jsimport reage de 'react'import {render} de' react-dom'import mycomponent de './component.js'import' ./main.css'// componente principal mydemo estends react.component {render () {return (<dstemMame = " <demo/>), document.getElementById ('App')) // component.js // Subcomponent React de 'react'export classe padrão myComponent estende react.component {render () {return (<div> <p> Este é um componente!Comparado com a estrutura do vue.js, eu pessoalmente acho que a maneira como os componentes do React é escrita não é tão confortável quanto Vue, e o estilo CSS do componente ainda está separado do exterior do componente, por isso não é muito conveniente para manter.
A partir deste exemplo, podemos ver os recursos do Virtual DOM e JSX do React. Comparado com outras estruturas, o DOM virtual do React pode não apenas melhorar o desempenho da página, mas também impedir ataques XSS, etc. Os princípios específicos do DOM virtual não são introduzidos aqui
Quanto à sintaxe JSX, é um tipo de açúcar de sintaxe de JS. Podemos implementar facilmente algumas funções através desse açúcar de sintaxe. Aqui, o JSX converte a sintaxe de XML em JavaScript puro, e os elementos XML, atributos e nós filhos são convertidos em parâmetros do react.CreateElement. Os açúcares de sintaxe JS semelhantes incluem o TypeScript e outros tipos.
roteamento
O mecanismo de roteamento front-end é um dos links mais importantes na criação de aplicações de página única (SPAs). Através do roteamento front-end, podemos otimizar a experiência do usuário sem obter todos os dados do servidor sempre, para apresentar rapidamente a página ao usuário.
O roteamento de reação depende do roteador React . O Router React mantém a interface do usuário e o URL sincronizados. Possui APIs simples e recursos poderosos, como carregamento de buffer de código, correspondência de roteamento dinâmico e estabelecimento da transição de localização correta.
Aqui está um exemplo de roteamento do React:
importar react, {componente} de 'react'import {render} de' react-dom'import {roteador, rota, indexroute, link, browserhistory} de 'react-router'Const Active = {color:' Red '} App componente meu componente {render () {return (retorno (retorno) para = "/" ActiveStestyle = {Active}> home </link> </li> <li> <link para = "/usuários" ActiveStestyle = {Active}> página </link> </li> </ul> {this.prop.children} </div)}} ncastEnds React.component. (! }}class Users extends React.Component { render() { return ( <div> <h2>Users</h2> </div> ) }}reender(( <Router history={browserHistory}> <Route path="/" component={App}> <IndexRoute component={Index}/> <Route path="users" component={Users}></Route> </Route> </sorter>), document.getElementById ('App')))Apenas um método de roteamento para reação está listado aqui. Comparado com outras estruturas, a sintaxe do roteamento do React é mais fácil de entender.
Gerenciamento de status
O gerenciamento do estado não é um aplicativo de uma página necessário. Usá -lo pode nos ajudar a gerenciar alterações em cada estado de maneira unificada, deixando todo o processo do projeto claro e sustentável. O React Implementation State Management pode usar o Redux oficialmente recomendado.
O Redux usa um fluxo de dados unidirecional rigoroso. Todo o estado de aplicação é armazenado em uma árvore de objetos e essa árvore de objetos existe apenas na única loja.
Exemplo de projeto
Aqui escrevi um site de uma única página usando o React, e a página é a seguinte:
Buscar
Como eu usei a interação busca para o Ajax no exemplo acima, apresentarei brevemente o busca aqui.
Podemos usar o Fetch como a próxima geração da tecnologia Ajax, que usa o método de promessa popular atual.
Usando buscar, podemos escrever Ajax para interagir com dados como este:
// Get data method fetchFn = () => { fetch('../../data.json') .then((res) => { console.log(res.status);return res.json() }) .then((data) => { this.setState({lists:data.listData}) }) .catch((e) => { console.log (e.message)})}Resumir
A coisa mais importante sobre aprender uma estrutura não é aprender sua tecnologia, mas aprender as idéias de solução de problemas que ela traz. Ao aprender a estrutura do React, você pode descobrir uma nova mentalidade a partir de seus novos recursos exclusivos. Somente quando o nível de pensamento é expandido, você pode voar livremente no oceano na extremidade frontal. Espero que este artigo seja útil para que todos aprendam a reação.