基础
React是什么
用于构建用户界面的 JavaScript 库
声明式编程
React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据改变时 React 能有效地更新并正确地渲染组件。
告诉计算机我们要什么 ---结果
声明式编程的好处
以声明式编写 UI,可以让你的代码更加可靠,且方便调试。
如何使用React
下载
可以通过 CDN 获得 React 和 ReactDOM 的 UMD 版本。
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
上述版本仅用于开发环境,不适合用于生产环境。压缩优化后可用于生产的 React 版本可通过如下方式引用:
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
React.development.js
- React.development.js 提供 React.development.js 核心功能代码,如:虚拟 dom,组件
- React.createElement(type,props,children);
let h1 = React.createElement(
"h1",
null,
"这里是h1标签的子级,可以是标签,也可以是内容,不写就是空标签"
);
react-dom.production.js
- ReactDOM 提供了与浏览器交互的 DOM 功能,如:dom 渲染
- ReactDOM.render(element, container, callback)
- element:要渲染的内容
- container:要渲染的内容存放容器
- callback:渲染后的回调函数
- ReactDOM.render(element, container, callback)
ReactDOM.render(
"这是第一个参数的内容",
document.querySelector("#app"),
()=>{
console.log("渲染成功")
}
);
为什么要使用 crossorigin 属性?
如果你通过 CDN 的方式引入 React,建议使用crossorigin
同时建议
你验证使用的 CDN 是否设置了 Access-Control-Allow-Origin: * HTTP 请求头
这样能在 React 16 及以上的版本中有更好的错误处理体验。
babel
babel-standalone.js:在浏览器中处理 JSX
下载地址:https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js
引入完成后要在script中加入type属性
<script type="text/babel">
...
</script>
使用JSX优化创建视图
插值表达式
let str = "这是str,应该是用来演示插值表达式的!!!"
ReactDOM.render(
<header>
<h1>{str}</h1>
<p>这是用JSX来渲染的</p>
</header>,
document.querySelector("#app"),
()=>{
console.log("渲染成功")
}
);
浏览器反馈
- 各种数据的插值状态(备注:
插值只能执行表达式,不能执行语句
)- number——正常输出
- true / false——不输出
- undefined——不输出
- null——不输出
- 数组——去掉逗号后渲染在页面
- 对象——需要调用属性名,不然会报错
条件输出
因为我们插值不支持语句,所以在做条件输出时只能支持一下三种方式
- 三目运算符——类似于if…else
- 逻辑或 || ——类似于取反的 if()
- 逻辑与 && ——类似于正常的 if()
ReactDOM.render(
<header>
<h1>{true ? "成立" : "不成立"}</h1>
<p>{false || '这是用JSX来渲染的'}</p>
<div>{true && "正确"}</div>
</header>,
document.querySelector("#app"),
()=>{
console.log("渲染成功")
}
);
列表输出
列表输出分为两种方式
- 提出
ReactDOM
里的element
并写成函数
let data = [
"内容1",
"内容2",
"内容3",
"内容4"
]
function toData(){
let arr = [];
data.forEach(item=>{
arr.push(<li>{item}</li>)
});
return arr;
}
ReactDOM.render(
<header>
{toData()}
</header>,
document.querySelector("#app"),
()=>{
console.log("渲染成功")
}
);
- 使用map方法
let data = [
"内容1",
"内容2",
"内容3",
"内容4"
]
ReactDOM.render(
<ul>
{
data.map(item=>{
return <li>{item}</li>
})
}
</ul>,
document.querySelector("#app"),
()=>{
console.log("渲染成功")
}
);
Fragment
必须有,且只有一个顶层的包含元素 - React.Fragment
let {Fragment} = React;
ReactDOM.render(
<Fragment>
<div class="box" style={style}></div>
</Fragment>,
document.querySelector('#main')
)
JSX注意事项
- JSX 是一个基于 JavaScript + XML 的一个扩展语法
- 它可以作为值使用
- 它并不是字符串
- 它也不是HTML
- 它可以配合JS 表达式一起使用
- 它不可以配合 JS 语句一起使用
- 所有的标签名必须是小写
- 所有的标签必须是闭合,哪怕是单标签
- class 要写做 className
- style 接收的是一个对象,并不是字符串
- style={{width:‘400px’}} 外层{} 是说这里是差值 内层的{} 是说这里是对象
- 所以这里的结构:插值 包裹着 对象 所以有了{{}}
- style={{width:‘400px’}} 外层{} 是说这里是差值 内层的{} 是说这里是对象
- 每次只能输出一个标签(或者说必须要有一个容器)
xss
我们上述说了reactDOM内的element不可以写成字符串,具体原因为:为了有效的防止 XSS 注入攻击,React DOM 会在渲染的时候把内容(字符串)进行转义,所以字符串形式的标签是不会作为 HTML 标签进行处理的