资料

原文

区别

1. React是驱动html dom渲染; React Native是驱动android/ios原生组件渲染；
2. 写react可以用前端知识直接上手，而React native虽然也可以，但是深入下去没有native知识支持很难

React Native 和 React区别

• 原理略有不同

  React和React Native的原理是相同的，都是由JS实现的虚拟dom来驱动界面view层渲染；只不过React是驱动html dom渲染；React Navtive是驱动android/ios原生组件渲染；其实在React Native推出之前，就已经存在这种使用js驱动app原生组件的技术了，比如Native script

• 编程思路不同

  react直接渲染dom，而React Native生成id，用bridge(最新用c++实现了)变成一个表，等待native 去调用，写React可以用前端知识直接上手，React Native虽然也可以，但是深入下去就没有native知识支持很难

什么是流式渲染

流式渲染主要思想是将HTML文档分块(chunk)并逐步发送到客户端，而不是等待整个页面生成后再发送

流式渲染并不是什么新鲜技术。早在90年代，网页浏览器就已经开始使用这个方式来处理HTML文档。

在SPA(单页应用)流行的时代，由于SPA的核心是客户端动态的渲染内容，流式渲染没有得到太多的关注。如今，随着服务端渲染相关技术的成熟，流式渲染成为可以显著提升首屏加载性能的利器.

下面这个gif可以直观的看到不使用流式渲染和使用流式渲染的差异

Node.js实现简单流式渲染

用处

它用于Next构建阶段，不作用于浏览器。文章配置文档使用更加文档

phase

phase 值是当前构建阶段。包含一下阶段

PHASE_EXPORT = 'phase-export'
PHASE_PRODUCTION_BUILD = 'phase-production-build'
PHASE_PRODUCTION_SERVER = 'phase-production-server'
PHASE_DEVELOPMENT_SERVER = 'phase-development-server'

原文

前言

在Next应用中，路由扮演者至关重要的角色。它决定了页面的渲染方式以及请求的处理逻辑。

Next提供了两套路由解决方案：Pages Router与App Router。自V13.4版本七，App Router成为默认的路由系统，为新的Next.js项目带来了更多优势

文件系统路由

假设React允许useState处于条件语句中，那么我们从React的视角来看看会发生什么？

假设第一次render的useState情况如下

const [a, setNextA] = useState(0);
const [b, setNextB] = useState(0);

有3个容易混淆的前端框架概念

1. 响应式更新
2. 单向数据流
3. 双向数据绑定

在继续阅读本文前，读者可以思考下是否明确知道三者的含义。

这三者之所以容易混淆，是因为他们虽然同属前端框架范畴内的概念，但又不是同一抽象层级的概念，不好直接比较。

本文会从3个抽象层级入手讲解这三者的区别。

响应式更新

响应式更新也叫细粒度更新。同时，最近前端圈比较火的Signal这一概念描述的也是响应式更新

笼统的来讲，响应式更新描述的是状态与UI之间的关系，即状态变化如何映射到UI变化

react适合做大型项目的一些原因

1. 大型项目的庞大带来的是代码优化以及性能优化等问题

   • react提倡的更细粒度的封装，带来的组件的复用性提高
   • 更高的自由度的编写(几乎无api)可以为手动优化性能带来更大的便利性

2. react社区的活跃性

   • 这点会反复提及，因为这点更加重要

   • 社区提供了多样性的解决方案和更多的选择，这对于一个大型项目(大量的坑)来说至关重要

     react的社区更活跃一些，尤其是各种UI框架比较稳定、系统，可以信赖。社区提供了多样性的解决方案和更多的选择，这对于一个大型项目(大量的坑)来说至关重要

3. 其他一些原因

   • 声明式设计--React采用声明范式，可以轻松描写应用
   • 高效--React通过对DOM的模拟，最大限度的减少与DOM的交互
   • 灵活--React可以与已知的库或框架很好的配合
   • JSX--JSX是Javascript语法的扩展。React开发不一定使用JSX，但我们建议使用它
   • 组件--通过React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中
   • 单向响应的数据流--React实现了单向响应的数据流，从而减少了重复代码，这也算它为什么比传统数据绑定更简单

前言

在请求中,首先axios作为请求底层封装库，统一拦截，处理发送请求头和接收的错误响应。

那么更高一层的封装可以选择swr或者react-query。目前react-query已经进入了第三个大版本，功能及其强大，虽然swr比较抢粮，但是两者也之差5kb的打包大小。另外swr只有16k start不到，而react-query不断增长已有18k start，随着时代发展，swr已经不足以应付各种使用场景。使用react-query作为axios的顶层封装才是趋势大流

那么你问我为什么axios层不选用umi-request或者fetch，那只能是仁者见仁智者见智了，axios的的82K star 是什么概念

在10月13日的first-class-support-for-promises RFC[1]中，介绍了一种新的hook —— use。

use什么？就是use，这个hook就叫use。这也是第一个

• 可以在条件语句中书写的hook
• 可以在其他hook回调中书写的hook

use是什么？

我们知道，async函数会配合await关键词使用，如

async function load() {
    const { name } = await fetchName();
    return name;
}