Os ganchos do React são um recurso que surgiu depois da fibra, por isso muitas pessoas acreditam erroneamente que os ganchos devem depender da fibra para serem implementados.
Agora, os ganchos não são implementados apenas no react, mas também em estruturas como preact, react ssr e midway. Sua implementação não depende de fibra.
Vamos dar uma olhada em como os ganchos nessas diferentes estruturas são implementados:
O React descreve a interface por meio de jsx, que será compilada em uma função de renderização por ferramentas de compilação como babel ou tsc, e então executada para gerar vdom:
A função de renderização aqui era React.createElement antes do React17:
Após o React 17, foi alterado para jsx:
Este jsx-runtime será introduzido automaticamente e não há necessidade de reter uma importação do React para cada componente como antes.
A execução da função Render gera vdom:
A estrutura do vdom é assim:
Antes do React16, esse vdom seria renderizado recursivamente, adicionando, excluindo e modificando o dom real.
Depois que o React16 introduziu a arquitetura de fibra, houve uma etapa extra: primeiro converter vdom em fibra e depois renderizar a fibra.
O processo de conversão de vdom em fibra é chamado de reconciliação, e o processo final de adição, exclusão e modificação do dom real é chamado de commit.
Por que precisamos fazer tal conversão?
Como o vdom só tem referências aos nós filhos, e nenhuma referência ao nó pai pai e outros nós irmãos, isso resulta na necessidade de renderizar recursivamente todos os nós vdom para o dom de uma só vez, sem interrupção.
O que acontece se for interrompido? Como o nó pai e os nós irmãos não são registrados, só podemos continuar a processar os nós filhos, mas não podemos processar outras partes do vdom.
É por isso que o React introduziu esse tipo de estrutura de fibra, que possui referências como retorno do nó pai, nó filho filho, nó irmão irmão, etc., que pode ser interrompida, pois todos os nós não processados podem ser encontrados após interrupção e recuperação.
A estrutura do nó de fibra é a seguinte:
Este processo pode ser interrompido e naturalmente pode ser agendado, que é um processo de agendamento.
Portanto, a arquitetura de fibra é dividida em três estágios: schdule, reconciliar (converter vdom em fibra) e commit (atualizar para dom).
Ganchos podem ser usados em componentes de função para acessar alguns valores, e esses valores são armazenados no nó de fibra.
Por exemplo, 6 ganchos são usados neste componente de função:
Depois, há uma lista vinculada memorizedState de 6 elementos no nó de fibra correspondente:
Concatenado por próximo:
Diferentes ganchos acessam valores em diferentes elementos da lista vinculada memorizedState. Este é o princípio dos ganchos de reação.
Esta lista vinculada possui uma fase de criação e uma fase de atualização, então você descobrirá que a implementação final de useXxx é dividida em mountXxx e updateXxx:
A fase de montagem aqui é criar nós de gancho e montá-los em uma lista vinculada:
A lista vinculada de ganchos criada será vinculada ao atributo memorizedState do nó de fibra.
Ao atualizar, você pode recuperar naturalmente esta lista de ganchos do nó de fibra:
Dessa forma, em múltiplas renderizações, a API useXxx pode encontrar o memorizedState correspondente no nó de fibra.
Este é o princípio dos ganchos de reação. Você pode ver que ele armazena o gancho no nó da fibra.
Então, qual é a diferença com o pré-ato?
Preact é uma estrutura mais leve, compatível com código de reação. Ele oferece suporte a componentes de classe e componentes de função, bem como recursos de reação, como ganchos. No entanto, não implementa a arquitetura de fibra.
Porque considera principalmente o tamanho final (apenas 3kb), não o desempenho final.
Acabamos de aprender que o react armazena a lista de ganchos no nó de fibra. Se o preact não tiver um nó de fibra, onde a lista de ganchos será armazenada?
Na verdade, é fácil pensar que a fibra apenas modifica o vdom para melhorar o desempenho, e não há diferença essencial do vdom. Então, podemos simplesmente armazenar o gancho no vdom?
Na verdade, preact coloca a lista de ganchos no vdom.
Por exemplo, este componente de função possui 4 ganchos:
Sua implementação consiste em acessar o gancho correspondente no vdom:
Ele não divide o gancho em dois estágios, montar e atualizar, como reagir, mas os mescla para processamento.
Conforme mostrado na figura, ele armazena ganchos na matriz de component.__hooks e os acessa por meio de subscritos.
Este componente é um atributo no vdom:
Ou seja, o valor dos ganchos é armazenado na matriz vnode._component._hooks.
Compare as diferenças entre reagir e preact na implementação de ganchos:
em reagir, a lista de ganchos é armazenada no atributo fiberNode.memorizedState, em preact, a lista de ganchos é armazenada no atributo vnode._component._hooks
A lista de ganchos em reagir é concatenada
através de next e preact A lista vinculada de ganchos é uma matriz que
React separa a criação e atualização da lista vinculada de ganchos
, a implementação dos ganchos não depende de fibra, basta encontrar um local para armazenar os dados do gancho correspondentes ao componente, desde que possam ser recuperados durante a renderização, não importa onde estejam armazenados.
Como vdom, fibra e renderização de componentes estão fortemente relacionados, eles são armazenados nessas estruturas.
Por exemplo, quando react ssr implementa ganchos, ele não existe em fibra nem em vdom:
Na verdade, além de csr, o pacote react-dom também pode fazer ssr:
Use o método render de react- dom quando csr:
Quando ssr, use o método renderToString ou o método renderToStream de react-dom/server:
Você acha que a conversão de vdom em fibra será feita durante o ssr?
Definitivamente não. Fiber é uma estrutura introduzida para melhorar o desempenho de renderização ao executar no navegador, tornar os cálculos interrompíveis e realizar cálculos quando ocioso.
A renderização no lado do servidor naturalmente não requer fibra.
Se a fibra não for necessária, onde ela armazena a lista de ganchos? vdom?
Na verdade, pode ser colocado em vdom, mas não é.
Por exemplo, ganchos useRef:
É uma lista vinculada concatenada com next começando em firstWorkInProgressHook.
E firstWorkInProgressHook é o primeiro nó de gancho criado com createHook:
Não está montado no vdom.
Por que?
Como o ssr só precisa ser renderizado uma vez e não precisa ser atualizado, não há necessidade de pendurá-lo no vdom.
Basta limpar a lista de ganchos toda vez que terminar de processar os ganchos de cada componente:
Portanto, ao usar react ssr, existem ganchos em variáveis globais.
Compare a diferença nos princípios de implementação de ganchos em react csr e ssr:
em csr, a fibra será criada a partir de vdom, que é usada para tornar a renderização interrompível e melhorar o desempenho por meio de agendamento ocioso, mas em ssr, não será renderizada diretamente por vdom. Ao usar
o csr, os ganchos são salvos no nó de fibra, enquanto ao usar o ssr, eles são colocados diretamente nas variáveis globais e são limpos após o processamento de cada componente. Como o CSR não será usado uma segunda vez
, a criação e atualização dos ganchos serão divididas em duas fases: montagem e atualização, enquanto o SSR será processado apenas uma vez e apenas a fase de criação.
O princípio de implementação dos ganchos não é realmente complicado. , ou seja, em um determinado contexto Armazene uma lista vinculada na lista vinculada e, em seguida, a API dos ganchos acessa os dados correspondentes de diferentes elementos da lista vinculada para completar sua respectiva lógica. Este contexto pode ser vdom, fibra ou até mesmo uma variável global.
No entanto, a ideia de ganchos ainda é muito popular. A estrutura do lado do servidor Midway produzida pelo Taobao introduziu a ideia de ganchos:
.
A estrutura do lado do servidor naturalmente não possui estruturas como vdom e fibra, mas a ideia de ganchos não depende delas. Para implementar a API de ganchos, você só precisa colocar uma lista vinculada em um determinado contexto.
Midway implementa uma API semelhante aos ganchos de reação:
Não procurei especificamente onde existe a lista de ganchos, mas já dominamos o princípio de implementação dos ganchos. Contanto que haja um contexto para armazenar a lista de ganchos, ele pode estar em qualquer lugar.
os ganchos de reação são um recurso que surgiu após a arquitetura de fibra de reação. Muitas pessoas acreditam erroneamente que os ganchos devem ser implementados com fibra, respectivamente, e descobrimos que. este não é o caso:
ela. vai ficar bem. Então, os ganchos de reação precisam depender de fibra para implementá-lo?
Obviamente que não, pode ser usado com fibra, vdom, variáveis globais, ou até mesmo qualquer contexto.