Javascript课程-React入门

第7部分:React —用于构建用户界面的JavaScript

  • React是一个用于构建用户界面的Javascript库
  • React不是功能齐全的javascript框架
  • React有一个庞大的社区,为React生态系统贡献了许多有用的库

React不使用模板。

传统上,Web应用程序UI是使用模板或HTML指令构建的。 这些模板规定了允许您用来构建UI的完整抽象集。

React通过将用户界面分成多个组件来构建用户界面的方式有所不同。 React使用一种真正的,功能齐全的编程语言来呈现视图,由于以下几个原因,我们认为它比模板更具优势:

  • JavaScript是一种灵活,强大的编程语言 ,具有构建抽象的能力。 这在大型应用程序中非常重要。
  • 通过使用相应的视图逻辑统一标记,React实际上可以使视图更易于扩展和维护
  • 通过对JavaScript中的标记和内容有所了解, 无需进行手动字符串连接 ,因此可以减少XSS漏洞的表面积。

在博客文章中阅读更多内容为什么我们要构建React? 由Pete Hunt于2013年6月5日发布。

  • 反应性更新非常简单。
  • HTML仅仅是开始。

JSX可能会让您想起模板语言,但是它具有JavaScript的全部功能。 JSX产生React“元素”。 JSX深度

元素是一个普通的对象,它描述了您希望根据DOM节点或其他组件在屏幕上显示的内容。 元素可以在其道具中包含其他元素。 创建一个React元素很便宜。 创建元素后,就永远不会对其进行突变。

React.Component

组件可以通过几种不同的方式声明。 它可以是带有render()方法的类。 或者,在简单情况下,可以将其定义为函数。 无论哪种情况,它都将props作为输入,并返回一个元素树作为输出。

类属性
可以将defaultProps定义为组件类本身的属性,以设置该类的默认props。 用于未定义的道具,但不用于空道具。

实例属性
道具 (代表属性)是组件对象输入参数的常用术语。 这就是为什么人们说道具在React中从父母流向孩子的一种方式。

状态包含特定于组件的数据,该数据可能会随时间变化。 状态是用户定义的,应该是普通的JavaScript对象。

📖https://reactjs.org/docs/thinking-in-react.html

接下来使用React继续

Javascript课程—使用React

第8部分:类似于HTML,但效果更好。

medium.com