初识React和JSX语法：带你走入React世界,让你彻底明白JSX语法

React概述

React 库可以说是大厂中用到的最多的一个库了，我们先来简单了解一下 React 吧。

官网：https://react.docschina.org/

什么是React？

React 是由 Facebook 研发的，一开始是 Facebook 用来架设自己的网站，后来开源了。用于解决UI复杂度的开源JavaScript库，目前由 React 联合社区维护。它并不是框架，只是为了解决UI复杂度而诞生的一个库

那 react 有什么特点呢？

1. 轻量：React的开发版所有源码（包含注释）仅3000多行
2. 原生 JS：所有的React的代码都是用原生JS书写而成的，不依赖其他任何库
3. 易扩展：React对代码的封装程度较低，也没有过多的使用魔法，所以React中的很多功能都可以扩展。
4. 不依赖宿主环境：React只依赖原生JS语言，不依赖任何其他东西，包括运行环境。因此，它可以被轻松的移植到浏览器、桌面应用、移动端。
5. 渐近式：React并非框架，对整个工程没有强制约束力。这对与那些已存在的工程，可以逐步的将其改造为React，而不需要全盘重写。
6. 单向数据流：所有的数据自顶而下的流动
7. 组件化

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，本质上是一个对象

1. param1：元素类型，可以是字符串（一个普通的HTML元素），也可以传入一个组件
2. param2：元素的属性，一个对象
3. 后续参数：元素的子节点

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