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

创新互联成立与2013年,先为武昌等服务建站,武昌等地企业,进行企业商务咨询服务。为武昌企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

>最原始的网站开发是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进行服务器渲染,或使用ReactNative开发原生移动应用。
React里组件化是比较重要的,一般来说有两种组件,一是一般组件,二是有状态的组件。来看一个简单的组件是怎样组成的,如图:

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

除了使用外部数据(通过this.props访问)以外,组件还可以维护其内部的状态数据(通过this.state访问)。当组件的状态数据改变时,组件会再次调用render()方法重新渲染对应的标记。
当前文章:网站前后端分离开发之react的学习与使用
地址分享:http://pwwzsj.com/article/sihjed.html