React学习(一):React入门

一 React 的优点

1.响应式渲染

React 最大的优点在于其响应式渲染,相对于传统的更新整个页面的缓慢而言,React 会生成一个虚拟的DOM,当用户进行操作使状态有所变化时,React会计算出一个新的虚拟表现,计算出虚拟页面的当前版本与新版之间的差异,基于这些差异对DOM进行必要的最少更新。

2.灵活的文档模型抽象表现

React 内置了一个自己的UI轻量级模型,以抽象出UI底层的文档模型,这样做的好处是不论在web页面,还是原生的iOS和android页面。他都可以使用同样的规则来渲染HTML。

3 使用纯javascript进行面向组件的开发

二 JSX的使用

1.JSX的介绍

JSX 即JavaScript XML,它是一种在React 组件内部构建标签的类XML语法,使用JSX可以提高组件的可读性,因此推荐使用。JSX最终会被转换为JavaScript。

2.JSX的优点

1⃣️更熟悉:团队中非开发人员可以轻松阅读代码,易读性强。

2⃣️更加语义化:能将JavaScript代码转为更加语义化的标签。

3⃣️更加直观:JSX在大的项目中,会使得上百个组件更为明了直观。

4⃣️抽象化:JSX的抽象了将标签转化为javascript的过程。

5⃣️关注点分离:这也是React的核心,旨在将HTML标签以及生成这些标签的代码紧密联系在一起,React鼓励你为每一个关注点创造一个独立的组件,并把所有的逻辑和标签封装在其中。

3.JSX与HTML不同之处

1⃣️标签特性采用驼峰式大小写风格如maxlength在JSX中应写为 maxLength。

2⃣️所有元素必须闭合如<br> 在JSX中必须写为<br/>。

3⃣️特性名称基于DOM API,如class在JSX中为className。

4.JSX怪异之处

1⃣️React组件只能渲染一个根节点,这是由于js的特性,即return语句只能返回单个的值,解决办法是将要返回的值都包含在一个根对象中。

2⃣️JSX不能使用if语句,可使用三元表达式替代,或者将条件语句移动到JSX外部。

三 props与state

1⃣️props一般为组件被调用时给出的,属于调用方,即属于父级,常用于父给子传递属性,一般情况下认为props是不会变的。

2⃣️state为当前状态,在与用户交互需要有所改变时,一般通过状态的改变来实现,状态改变后需要通过setstate来更新,会使得已经mounted的内容重新updating。

四 生命周期

分为三部分:mounted - updating - unmounted,在每一个状态下都有相应的钩子函数,具体内容如图所示。React学习(一):React入门