1-JSX和渲染

1. conception

JSX —— JS和XML结合的一种格式，是一个JS的语法扩展，具有js的全部功能，允许HTML和JS的混写。遇到 "<"就以HTML语言解析，“{”则以JS语法解析。可以更好的描述UI应该呈现出它应有交互的本质形式。

const element =

Hello,world!

使用JSX的原因？

react没有采用将标记与逻辑分离到不同文件这种分离方式，而是使两者在组件中共存，来实现“关注点分离”。

2. grammer

· JSX允许在模板里直接添加JS变量，若变量是个数组，则会直接展开。在添加HTML时，如果有多个标签元素，需要用一个标签元素包裹起来，等同Vue中的模板必须要有一个唯一的根元素一样。

1-1

· 在JSX语法中，可以在大括号内放置任何有效的JS表达式，在编译之后JSX表达式会被转为普通JS函数调用，取值后得到JS对象。

· JSX中无法使用if-else语句，用三元表达式来代替，另对同一个属性不能同时使用引号（对于字符串值）和大括号（对于表达式）。

· JSX语法上更接近JS而非HTML，所以使用小驼峰命名约定。

· react dom在渲染所有输入内容之前，默认会进行转义，可确保在应用中不会注入那些并非自己明确编写的内容，所有的内容在渲染之前都被转换成了字符串，有效地防止XSS攻击。

· 关于注释，在标签外的不需要花括号，标签内的需要。

· Babel会将JSX解析成React.createElement() ，下图中两种例子是完全相同的。

1-2

React.createElement()会预先执行一些检查，并且创建一个element对象，这个对象被称为React元素，React通过读取这些对象，然后构建DOM以及保持更新。

与浏览器DOM元素不同，react dom负责更新DOM来匹配react元素。react元素是不可突变的，一旦被创建将无法修改其子元素和任何属性，唯一更新的方法是创建一个新的元素并传入render中。

1-3

· 阻止渲染：要求返回null。

3. render

元素是构成React应用的最小砖块，描述了用户想在屏幕上看到的内容，创建开销极小的普通对象。

仅使用React构建的应用通常只有单一的根DOM节点，如果是将React集成进一个已有应用，就可以在应用中包含任意数目的独立根DOM节点，想要将一个React元素渲染到根DOM节点中，只需要把它们一起传入ReactDOM.render()。

React元素是不可变对象，一旦被创建就无法更改其子元素或属性，更新UI的唯一方式是创建一个全新的元素并将其传入ReactDOM.render()，大多数React应用只会调用一次ReactDOM.render()，且React只更新需要更新的部分，当创建一个描述整个UI树的元素，React DOM会将元素和子元素与之前的状态进行对比，然后只更新实际改变了的内容。

条件渲染：声明一个变量进行条件渲染是最基础的方式，但不够简洁

1-4

· 使用运算符 && ，原理是在JS中， true && expression总是会返回expression，而false && expression总是会返回false,因此当为真时，&&右侧的元素就会被渲染，反之React就会跳过。

1-5

· 另一种内联条件渲染方法是使用三元运算符，不过当条件过于复杂优先考虑提取组件。

阻止元素渲染：render方法返回Null即可，在组件的render()返回null并不会影响组件的生命周期，钩子函数仍会被调用。