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>等，综合如为下：
- 变量名
- JSX 语法表达式（也就是说 JSX 其实是一种表达式）
- 自执行函数表达式（如果只是单纯的函数定义的表达也可以，只是没有运行结果）
- 函数调用表达式
- 属性访问表达式
- 算法，关系，逻辑，字符串表达式
- 三元运算表达式
示例如下：
//变量
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的好处:
- Javascript中使用类似HTML的语法
- 可以有效的防止xss注入
- 它可以快速的编写一个UI组件
-
JSX语句是怎么编译的
const el = (
<div className="greeting">hello, world</div>
)
对于上面这个JSX语句，react编译处理形成如下的对象：
const element = React.creatElement('div',{className:'greeting'},'hello , word')
每一个参数对应起来**[标签名,属性,孩子节点]
