react 学习笔记

使用 jsx 语法

• 概念

const element = <h1>hello world!</h1>;

<font color="red">JSX</font>是一种 JavaScript 的语法拓展。我们推荐 react 中使用 jsx 来描述用户界面。<font color="red">JSX</font>看起来可能比较像模板语法，但事实上它完全是 JavaScript 内部实现的。

React 通过 jsx 快速的渲染 DOM 节点，但我们开始说说<font color="red">JSX</font>语法必备的一些基本知识

这里着重声明，所谓的 JSX 一定是以标签为开端，以标签为终结的语句即为 JSX，在 React 编译这段 JSX 时，会将它处理为一个 JavaScript 对象。同时 React 语法是基于 ES6 的

• 在 JSX 中可以掺杂表达式

  如何插入呢，我们需要将 JXS 表达式都用一个大括号包括进来。
  
  而所谓的表达式即 JavaScript 中的表达式，比如：<font color="red">1+1</font>,<font color="red">user.id</font>,和<font color="red">func(a,b)</font>等，综合如为下：
  

1. 变量名
2. JSX 语法表达式（也就是说 JSX 其实是一种表达式）
3. 自执行函数表达式（如果只是单纯的函数定义的表达也可以，只是没有运行结果）
4. 函数调用表达式
5. 属性访问表达式
6. 算法，关系，逻辑，字符串表达式
7. 三元运算表达式

示例如下：

//变量
const use = "abc";
//属性表达式
const user = {
  fristName:"yang",
  lastName:"gg"
};
//函数调用表达式
function formatName(user){
  return `${user.fristName} ${user.lastName}`
}
const t1 = 1; const t2 = 2;
//JSX
const a = <div>{use}</div>
const b = <div>{user.fristName}</div>
const c = <div>formatName(user)</div>
const d = <div>{1+1+1}</div>
const e = <div>{t1 && t2}</div>
const f = <div>{t1 < t2 ? "t1小于t2": "333"}</div>
const i = <div>{function(){return "自调函数"}()}</div>
const k = {<div>iii</div>}

说的通透点，在JSX中可以插入的就是函数调用，和我们的标识符，还有运算。

多说一句就是，如果存在多行JSX语句要写，我们可以进行如下处理

const a = (
  <div>
    <h1>a</h1>
  </div>
)

需要用小括号括起来

• JSX语法是一个对象，是一个运用HTML标签结构却实现了JavaScript语法对象。

前面也强调了JSX语句其本质就是一个JavaScript对象和表达式，最简单的例子证明就是如下：

function getGreeting(user){
  if(user){
    return <h1>hello,{formatName(user)}</h1>
  }
  return <h1>Hello,Stranger.</h1>
}

它可以在函数中直接返回，所谓返回值，那他一定是一个值，不是对象就是基础数据类型.

这里想让大家升入一个观念，JSX不是HTML标签

那么问题来了，JSX竟然类似于HTML标签，那么它虽然不是HTML标签，但是是否拥有HTML标签的一些特性，它可以自定义属性吗，当然可以，但是这里需要注意一下几点：

• 对于一个HTML标签已经拥有的属性，jsx需要用驼峰命名来处理，比如tabindex必须写成tabIndex 才能起作用，比如：

const el = <div tabIndex="0"></div>;

当然对于class会出现问题，因为在ES6下可以用<font color="red">class</font>定义类出现在JSX中。

const el = <div className="temp"></div> //true
const el2 = <div class="temp"></div> //false

• **对于用户的自定义属性（肯定可以自定义），当然我们必须要叫<font color="red">data-</font>前缀，否则无效。

const el = <div fff="0"></div> //false
const el2 = <div data-fff="0"></div>//true

• 对于属性的赋值会有限制
  有两种赋值方法:
  
  ① 使用大括号（就是我们用的表达式赋值）
  ② 是使用双引号赋值

const el = <div className={'abc'}></div> //①
const el2 = <div className="abc"></div> //②

• jsx语法的安全性

jsx的好处:

1. Javascript中使用类似HTML的语法
2. 可以有效的防止xss注入
3. 它可以快速的编写一个UI组件

• JSX语句是怎么编译的

const el = (
  <div className="greeting">hello, world</div>
)

对于上面这个JSX语句，react编译处理形成如下的对象：

const element = React.creatElement('div',{className:'greeting'},'hello , word')

每一个参数对应起来**[标签名,属性,孩子节点]