React概述
React 库可以说是大厂中用到的最多的一个库了，我们先来简单了解一下 React 吧。
官网：https://react.docschina.org/
什么是React？
React 是由 Facebook 研发的，一开始是 Facebook 用来架设自己的网站，后来开源了。用于解决UI复杂度的开源JavaScript库，目前由 React 联合社区维护。它并不是框架，只是为了解决UI复杂度而诞生的一个库
那 react 有什么特点呢？
- 轻量：React的开发版所有源码（包含注释）仅3000多行
- 原生 JS：所有的React的代码都是用原生JS书写而成的，不依赖其他任何库
- 易扩展：React对代码的封装程度较低，也没有过多的使用魔法，所以React中的很多功能都可以扩展。
- 不依赖宿主环境：React只依赖原生JS语言，不依赖任何其他东西，包括运行环境。因此，它可以被轻松的移植到浏览器、桌面应用、移动端。
- 渐近式：React并非框架，对整个工程没有强制约束力。这对与那些已存在的工程，可以逐步的将其改造为React，而不需要全盘重写。
- 单向数据流：所有的数据自顶而下的流动
- 组件化
react 和 vue 的对比：
| 对比项 | Vue | React |
|---|---|---|
| 全球使用量 | ✔ | |
| 国内使用量 | ✔ | |
| 性能 | ✔ | ✔ |
| 易上手 | ✔ | |
| 灵活度 | ✔ | |
| 大型企业 | ✔ | |
| 中小型企业 | ✔ | |
| 生态 | ✔ |
我的 react 系列，将会从 React 基础，React 进阶、React-Router、Redux、第三方脚手架、UI库Ant Design和最后的源码分析来依次更新。
我们初识一门语言总是来 “ Hello World ”
Hello World
直接在页面上使用 React，引用下面的 JS
<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.createElement
创建一个 React 元素，称作虚拟 DOM，本质上是一个对象
- param1：元素类型，可以是字符串（一个普通的HTML元素），也可以传入一个组件
- param2：元素的属性，一个对象
- 后续参数：元素的子节点
const h1 = React.createElement("h1",{id:"title"},"这是一个标题")
ReactDOM.render(h1,document.getElementById("root"))
ReactDOM.render
可以将 React 元素转换为 dom 元素
// ReactDOM.render(显示的东西,容器);
ReactDOM.render("hello world",document.getElementById("root"))
我们通过这种方式书写肯定会很不爽，所以 react 是支持 JSX 语法的
JSX
什么是JSX
- JSX是 Facebook 起草的 JS 扩展语法，需要使用 babel 进行转义
// ...
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(<h1>这是一个标题</h1>, document.getElementById("root"))
</script>
- 本质是一个JS对象，会被babel编译，最终会被转换为React.createElement
const div = ( <div>这是一个div元素</div> )
//会被转换为
Reeact.createElement("div",{},"这是一个div元素")
- 每个JSX表达式，有且仅有一个根节点
React.Fragment：如果想要有多个根节点，可以使用React.Fragment，它不会把<React.Fragment>渲染到页面上
const h1 = (
<React.Fragment>
<h1>这是第一个JSX语法</h1>
<p>这是内容</p>
</React.Fragment>
)
//
const h1 = (
<>
<h1>这是第一个JSX语法</h1>
<p>这是内容</p>
</>
)
- 每个 JSX 元素要遵循 XML 规范，必须有结束标签
const img = <img src="./logo.png" alt=""> //报错
//正确写法
const img = <img src="./logo.png" alt="" /> //自闭合标签
const img = <img src="./logo.png" alt=""></img>
在JSX中嵌入表达式
const a=123,b=456;
const div = (
<div> {a} * {b} = {a*b} </div>
)
//==>转换为
const div = React.createElement("div",{},`${a} * ${b} = ${a*b}`)
- 在JSX中使用注释
{/* JSX中的注释 */}
-
将表达式作为内容的一部分
- null、undefined、false不会显示
//不会渲染到页面上 const img = undefined ReactDOM.render(img,document.getElementById("root"))- 普通对象，不可以作为子元素
const obj = { name:"monk", age:18 } ReactDOM.render(<div> { obj } </div>,document.getElementById("root"))- 可以放置 React 元素对象
const span = <span>这是一个span元素</span> const div = <div> { span } </div> ReactDOM.render(div, document.getElementById("root"))- 可以放置数组元素，但数组元素中有普通对象，同样会报错
const arr = [1,2,3,4] const div = <div> { arr } </div> ReactDOM.render(div, document.getElementById("root")) -
将表达式作为元素属性
-
属性使用小驼峰命名法
<img src={url} className="image" style={ {width:"200px"} } alt="">
- 防止注入攻击，会自动编码
const content = "<h1>monk</h1>"
cosnt div = (
<div>{ content }</div>
)
//渲染结果是: <h1>monk</h1>
- dangerouslySetInnerHTML
const content = "<h1>monk</h1>"
cosnt div = (
<div dangerouslySetInnerHTML={{ __html:content }}></div>
)
//渲染结果是(大标题): monk
JSX元素的不可变性
- 虽然 JSX 元素是一个对象，但是该对象中的所有属性不可更改
let div = <div>这是一个 div 元素</div>
ReactDOM.render(div, document.getElementById("root"))
div = <div>这是一个修改过的 div 元素</div>
- 如果确实需要更改元素的属性，需要重新创建 JSX 元素，不用担心性能问题，此时改变的是虚拟 dom，ReactDOM 进行优化处理了
div = <div>这是一个修改过的 div 元素</div>
//重新渲染
ReactDOM.render(div, document.getElementById("root"))
开发环境搭建
VSCode配置
- 在 js 中可以编写标签的配置（JSX语法）
settings.json中配置：
"emmet.includeLanguages":{
"javascript": "javascriptreact"
}
VSCode插件安装
- ES7 React/Redux/GraphQL/React-Native snippets：快速编写React相关代码
Chrome插件安装
- React Developer Tools：谷歌商店中可以下载
使用脚手架搭建工程
- create-react-app脚手架，类似vue-cli
yarn create react-app projectName