React爬坑第一天

React爬坑第一天

React

核心概念JSX

JSX是JavaScript扩展，JSX有着更好的渲染模式，JSX体现着交互的本质

react认为JSX与其他渲染UI有着很大的耦合性，因此react并没有这么做，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中

JSX镶嵌表达式

<div id="root"></div>

const name = 'JSX';
const element = '<h1>React</h1>

ReactDom.render(
	element,
	document.getElementById('root')
)

//结果
<div id='root'>
	<h1 name='JSX'>React</h1>
</div>

root表示挂载(学过VUE的同学应该知道挂载)，name表示创建标签的名字，element表示构建标签/组件
ReactDom.render()表示元素渲染，render表示渲染，里边包含被渲染目标挂载到谁身上，id表示唯一标识挂载对象(学过css同学都知道，id只能出现在最重要的位置并且只能出现一次)，准确来说id便是全局对象，element表示被渲染目标对象，getElementById(‘root’)表示全局对象，挂载目标。

任意表达式any

在ReactDom.render()里边可以写任意表达式,如(const name = 123,const name = ‘123’,const switch = false; function name(){}；$(fucntion(){}())等…)；

const name = {
	nams: 'React',
	ages: 'The 10th anniversary of the'
}

function user(name){
	return name.names +''+ name.ages;
}

const label = <h1>React +''+ {user(name)}</h1>
ReactDOM.render(label,
	document.getElementById('root'));
//结果
<div id='root'>
	<h1>React React The 10th anniversary of the</h1>
</div>
//React React The 10th anniversary of the

书写方式可以随意同时，我们建议将内容包裹在括号中，虽然这样做不是强制要求的,但比较推荐将一些方法归纳成方法区，定义区为定义区，等…并不强制要求，但可以会在最后编译是会出现webpack自动补全陷阱；以我个人为例，比较喜欢讲方法归纳到一起，初始化的属性或定义的属性归纳到一起，这样以方便维护及使用(这样可以偷个懒，下次有用到的直接导入调用)；

function name(name){
	if(name){
		<h1>React +''+ {user(name)}</h1>
	}else{
		<h1></h1>
	}
}

JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。
也就是说，可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX：

JSX特性

const name = <h1 tabindex='0' calss="name"></h1>

可以使用括号来将属性指定为字符串字面量

	const name = <img src={name.img}></img>

也可以插入JavaScript表达式

ReactDom.render(
	<div>
		<span></span>
		<p></p>
	</div>
)

也支持多标签嵌套及多标签

JSX防止注入攻击

官方的原话

React DOM 在渲染所有输入内容之前，默认会进行转义。
它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。
所有的内容在渲染之前都被转换成了字符串。
这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。

JSX解构

Bable会转译成一个名为 React.createElement() 函数调用。(把JSX进行解析成JavaScript对象)

	const name = <span class="names">你好，噢！我不好</span>
	//第一次解析
	const name = React.creareElement(
		'span',
			{names},
		'你好，噢！我不好'
	)
	//最终解析
	const name = {
		type:'span',
		props:{
			name:'names',
			children:'你好，噢！我不好'
		}
	}

所谓的万物皆对象,看来不是一句空谈(hhhhh),刷新了对react的认知了 没想到底层的代码解析是这样的