初识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 的对比:

对比项VueReact
全球使用量
国内使用量
性能
易上手
灵活度
大型企业
中小型企业
生态

我的 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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值