学习笔记三

React

React是用于构建用户界面的JavaScript库。由FaceBook开发的，能简单，快速，高效地开发复杂和交互式的Web和移动UI。优点体现在开发效率、维护、组合扩展、生态、组件化思想等。

• 声明式。配合使用JSX，以声明式编写UI, 使得代码编写容易，容易理解和维护。
• 组件化。通过React组件来构建各种UI，组件拥有状态，当状态数据改变时，React能有效地更新并正确地渲染组件。
• 跨平台。一次学习，随处编写。可以在Web开发中使用，也可以使用 Node 进行服务器渲染，还可以使用基于React的 React Native 开发原生移动应用。

JSX

JSX(JavaScript XML)是 JavaScript 定义的一套用于描述UI的扩展语法。使用JSX来编写UI，使得代码的可读性更好。在React开发中，经常会使用JSX来写组件。

JSX语法

JSX语法有如下一些规则：

1. 自定义组件使用是必须首字母大写，首字母不大写会直接解析为同名html标签
2. 属性名称用camelCase来定义
3. 对于字符串值，用引号
4. 对于表达式，用大括号，可以在大括号内放置任何有效的 JavaScript 表达式。
5. 一个标签里面没有内容，可以使用 /> 来闭合标签
6. JSX中编写注释用大括号将/* */语句包起来

JSX和HTML的区别有

1. key、ref 和 dangerouslySetInnerHTML属性只在JSX中存在
2. 使用到HTML的标记元素的class属性名称在JSX中是className
3. JSX中事件要使用小驼峰式写法
4. style中的css属性要使用小驼峰式写法

React元素

React元素就是JSX表达式的值，通过React元素来渲染屏幕上的内容。ReactDOM 会负责更新 DOM 来与 React 元素保持一致。 将一个React元素渲染到HTML的节点（假设id = 'root'）上的方法是把它们传入ReactDOM.render()方法中，ReactDOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态，从而提高性能。

React组件

React组件使用一个名为 render() 的方法，接收输入的数据并返回需要展示的内容，展示的内容是由React元素构成的。 最简单的React组件

1. 创建一个继承于React.Component的class
2. 创建render方法并实现
3. 自定义组件名称必须以大写字母开头。
   在React应用中，UI是由一系列React组件构建起来的。这些组件将整个UI分成小的、独立的甚至是可重用的部分。一个组件的变动不会影响到另一个组件。