网站建设资讯

网站前后端分离开发之react的学习与使用

网站建设 2021-10-28 09:11:17 | 阅读:51 | 作者:严成 | 标签:React    前后端分离    
最原始的网站开发是HTML代码和程序代码混在一起,后面大家发觉这种不好维护,前端看不懂代码,程序员又不太懂前端,随着网站应用的复杂度越来越高,后面发展到采用模板和程序分离的方式,这种很大程序解决了HTML和代码混在一起的问题。

现在,随着前端技术的发展,如REACT、VUE等前后端分离技术,现在很多产品应用都采用这种开发方式,前端和后端采用API方式沟通,完全分离,增加了前端的难度,但更好的分工。(这里注意一下,如果是展示型网站,还是不太适合,不太适合搜索引擎优化。)


目前前端有三大主流框架(vue,react,angular),react就是其中之一。Reaact有三个显著的特点:1.声明式;2.组件化;3.一次学习,随处编写。

1.声明式:React采用声明范式,可以轻松描述应用。为你应用的每一个状态设计简洁的视图,当数据改变时 React 能有效地更新并正确地渲染组件。以声明式编写 UI,可以让你的代码更加可靠,且方便调试。
2.组件化: 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。创建拥有各自状态的组件,再由这些组件构成更加复杂的 UI。组件逻辑使用 JavaScript 编写而非模版,因此你可以轻松地在应用中传递数据,并使得状态与 DOM 分离。
3.一次学习,随处编写:无论你现在正在使用什么技术栈,你都可以随时引入 React 来开发新特性,而不需要重写现有代码。React 还可以使用 Node 进行服务器渲染,或使用 React Native 开发原生移动应用。
React里组件化是比较重要的,一般来说有两种组件,一是一般组件,二是有状态的组件。来看一个简单的组件是怎样组成的,如图:

react代码

React 组件使用一个名为 render() 的方法,接收输入的数据并返回需要展示的内容。在示例中这种类似 XML 的写法被称为 JSX。被传入的数据可在组件中通过 this.props 在 render() 访问。
使用 React 的时候也可以不使用 JSX 语法。尝试使用 Babel REPL,了解 JSX 被编译成原生 JavaScript 代码的步骤。
状态组件,如图:

前后端分离

除了使用外部数据(通过 this.props 访问)以外,组件还可以维护其内部的状态数据(通过 this.state 访问)。当组件的状态数据改变时,组件会再次调用 render() 方法重新渲染对应的标记。