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

来源：网站建设行业资讯网
添加时间：2022-01-15

最原始的网站开发是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()方法重新渲染对应的标记。