React学习(一)：React入门

react

1.响应式渲染

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

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

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

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

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外部。

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

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

分为三部分：mounted － updating － unmounted，在每一个状态下都有相应的钩子函数，具体内容如图所示。