前言

一个页面的展示由html组成, 在此基础上, css规定html标签的的样式, 即我们所看到的样子, javascript脚本作为规定html以及css的动态运行方式.

所有的html标签在Web端进行渲染时, 都会渲染成DOM结构, html标签之间嵌入的关系, 也会具体为dom元素之间的父子关系.

在我们传统常见的网页中, 一般都是命令式编程的方式来规定html 元素时如何变化的, 也就是什么样的情况组件需要变成什么样子, 修改什么内容等.

传统式组件编写方式的问题(命令式编程)

而React引入了一种声明式编程方式来代替传统的命令式编程, 这有什么好处呢?
先来看看传统式编程的缺点
传统的命令式编程有以下的缺点

1. 代码冗长, 容易有边界问题, 所有的分支是否能覆盖所有用户的操作行为
2. 不好理解, 需要逐步去理解所有代码才能知道组件变化的含义
3. 组件之间代码耦合过度的代码, 不好复用
   当然也有优点, 那就是快, 当你技术水平 足够高的话, 自然会得到这种好处. 但是对我们一般的开发者而言, 这些缺点远远大于优点.

什么是声明式编程?

我们在编写前端组件时不在去关注具体的流程, 而是去关注与我想要什么样的组件? 举个例子就是, 命令式编程是要告诉厨师一步一步如何制作芝士披萨, 第一步和面粉, 第二步....
而声明式编程就是直接说我想要一个芝士披萨.

当然这样的好处也不是一下就能得到的, 首先肯定会衍生出一部分你从未听过的概念, component, props, state, jsx. 所有的这些都是为服务我们更好得去声明我们想要什么? 不用太过担心, 可以去看下Next.js写的React概念教学. 相信你可以很快得上手.

Next.js 又是什么?

简单来说, 我们的前端页面不但是由组件构成, 他还需要有一些页面进行跳转, 页面的数据如何进行变化, 如何渲染, 页面如何路由, 如何获取数据等等 这些功能.

Next.js 框架就是来帮助我们更好得实现这些功能, 方便我们更好得来编写业务代码