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,在每一个状态下都有相应的钩子函数,具体内容如图所示。