持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第33天，点击查看活动详情
React ALL in js. => jsx
learn more,write anywhere.技术生态非常完整。
react:react=>react-dom web / react-native app /react vr全景开发 /electron +react 桌面程序。
react通过写jsx语法利用element元素形成每一个app最小单元，再逐步形成一个个小component组件，再形成components大组件，即形成application应用。所以，它真强。
01.最初原理
实际上写的都是jsx语法，何为jsx，即将html与css都写成js的形式，例如，
var a = <h1>123</h1>
以上就是一个jsx语法
<body>
<!-- 01 准备容器 -->
<div id="app"></div>
<!-- 02 引入开发开发相关库 注意顺序-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- babel解析jsx语法 => 浏览器能识别的代码 -->
<script type="text/babel">
// <!-- 03 写jsx语法 =>(js+xml(类似于html))-->
var e = <h1>helloworld</h1>
// 04 挂载容器
ReactDOM.render(e, document.getElementById("app"))
</script>
</body>
复制代码
02.扩展
本质e到底是什么？
打印e，结果得出jsx构建的元素，本质是普通的js对象，即虚拟dom。
例如： var e = 《h1》helloworld《/h1》，如下
id为app的div为真实dom，所以在render时，作用即是将虚拟dom利用diff算法转化成真实dom，挂载至容器。
例如： var e = 《div》《h1》helloworld《/h1》《/div》
本质是通过diff算法构成dom树。
03.元素e的使用
- 作为变量
const name = 'react'
var e = <h1>hello{name}</h1>
复制代码
- 用于计算
// var e = <h1>hello{2021 + 1}</h1>
复制代码
- 在jsx语法中调用函数
function formatName(user) {
return user.firstName + "-" + user.lastName
}
var user = {
firstName: "Guo",
lastName: "jiaxin"
}
var e = <h1>hello,{formatName(user)}</h1>
复制代码
- 在函数中调用jsx
function formatName(user) {
return user.firstName + "-" + user.lastName
}
var user = {
firstName: "Guo",
lastName: "jiaxin"
}
function greeting(user) {
if (user) {
return <h1>hello,{formatName(user)}</h1>
} else {
return <h1>hello,stranger</h1>
}
}
var e = greeting(user)
复制代码
- 包裹元素
jsx表达式只能有一个根元素
- 输入自动转义成普通字符串显示在界面，触发jsx安全机制功能
var content = '<a>link</a>'
var e = <div>{content}</div>
复制代码
如上，界面中的Link被安全转译成字符串，而非链接形式。
但若想显示特殊的安全链接，则需要特定转化。
例如，想要跳转baidu链接：
var content = '<a href="http://www.baidu.com">link</a>'
var e = <div dangerouslySetInnerHTML>{{_html:content}}</div>
复制代码
如上，就可以实现点击跳转至指定链接了。
- 循环
//数据
var hobby = ['a', 'b', 'c'];
//组装
let eArray = [];
for (let i = 0; i < hobby.length; i++) {
const element = <li>{hobby[i]}</li>
eArray.push(element)
}
var e = <ul>{eArray}</ul>
复制代码
