React精髓！一篇全概括小结(急速)

学和使用react有一年多了，最近想在梳理一下react基础知识,夯实基础，激流勇进~
关于reacr-router,redux,redux-saga后续都会慢慢输出，希望各位看官老爷持续关注~~要是能给个赞鼓励一下就更赞了~

提醒一下：

看完之后抓紧时间趁热打铁，redux,react-redux,redux-saga

react基础知识速览

1、什么是JSX？

一个JSX语法的示例，如下所示

const element = <h1>Hello, world!</h1>;

这种语法形式，既不是HTML，也不是字符串，而是称之为JSX，是React里用来描述UI和样式的语法，JSX最终会被编译为合法的JS语句调用（编译器在遇到{时采用JS语法进行解析，遇到<就采用HTML规则进行解析）

2、嵌入表达式

JSX中，可以使用花括号{}嵌入任意的JavaScript合法表达式，如：2 + 2、user.firstName、formatName(user)都是合法的。示例如：

const user = { firstName: 'Zhang', lastName : 'Busong'};const elem = ( <h1>Hello, {formatName(user)}</h1>);/*这里的()，实际上是可选的，但是React推荐加入()，这样子就会被视为一个表达式，而不会导致自动插入分号的问题*/ReactDOM.render( element, document.getElementById('app'))

3、JSX也是一种表达式

JSX本身也是一种表达式，所以它可以像其他表达式一样，用于给一个变量赋值、作为函数实参、作为函数返回值，等等。如：

function getGreeting(user) { if (user) {  return <h1>Hello, {formatName(user)}</h1> } return <h1>Hello, Guest!</h1>;}

注意：

1、在JSX中，声明属性时不要使用引号，如果声明属性的时候使用引号，那么将被作为字符串解析，而不会被作为一个表达式解析，如：

<div firstName="{user.firstName}" lastName={user.lastName}></div>

解析后，可以得到：

<div firstName="{user.firstName}" lastName="Lau"></div>

因此，当我们需要使用一个字符串字面量的时候，可以使用引号，但是如果要作为表达式解析的时候，则不应当使用引号

2、在JSX中，有些属性名称需要进行特殊处理。如class应该用className代替，tabindex则用tabIndex代替。这是因为JSX本质上更接近于JavaScript，而class是JavaScript中的保留字。同时，应该使用camelCase来命名一个属性，而不是使用HTML的属性命名方式

3、JSX本身已经做了防注入处理，对于那些不是明确编写的HTML代码，是不会被解析为HTML DOM的，ReactDOM会将他们一律视为字符串，在渲染完成前就转化为字符串，所以可以防止XSS攻击