当前位置：首页 > news >正文

【React】React概念、特点和Jsx基础语法

news 2025/6/25 21:43:05

React是什么？

React 是一个用于构建用户界面的 JavaScript 库。

是一个将数据渲染为 HTML 视图的开源 JS 库
它遵循基于组件的方法，有助于构建可重用的 UI 组件
它用于开发复杂的交互式的 web 和移动 UI

React有什么特点

使用虚拟 DOM 而不是真正的 DOM
它可以用服务器渲染
它遵循单向数据流或数据绑定
高效
声明式编码，组件化编码

React的优点

声明式设计 −为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。

高效 −React采用Virtual DOM(虚拟DOM), 极大的提升了UI渲染(更新)效率。
灵活 −React 允许你结合其他框架或库一起使用。
JSX − JSX 是 JavaScript 语法的扩展。JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。
组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
单向响应的数据流 − React 采用了单向响应的数据流，使组件状态更容易维护, 组件模块化更易于快速开发。

虚拟DOM和真实DOM的两种创建方法

Js创建

//1.创建虚拟DOM,创建嵌套格式的dom
const VDOM=React.createElement('h1',{id:'title'},React.createElement('span',{},'hello,React')
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.querySelector('.test'))

Jsx创建

//1.创建虚拟DOM
const VDOM = (/* 此处一定不要写引号，因为不是字符串 */<h1 id="title"><span>Hello,React</span></h1>
)
//2.渲染虚拟DOM到页面React
DOM.render(VDOM,document.querySelector('.test'))

js 的写法并不是常用的，常用jsx来写，毕竟JSX更符合书写的习惯

Jsx语法

定义虚拟DOM，不能使用“”
标签中混入JS表达式的时候使用{}
id = {myId.toUpperCase()}
样式的类名指定不能使用class，使用className
内敛样式要使用{{}}包裹
style={{color:‘skyblue’,fontSize:‘24px’}}
不能有多个根标签，只能有一个根标签
标签必须闭合，自闭合也行
如果小写字母开头，就将标签转化为 html 同名元素，如果 html 中无该标签对应的元素，就报错；如果是大写字母开头，react 就去渲染对应的组件，如果没有就报错

注释

写在花括号里

ReactDOM.render(<div><h1>小丞</h1>{/*注释...*/}</div>,document.getElementById('example')
);

数组

JSX 允许在模板中插入数组，数组自动展开全部成员

var arr = [<h1>小丞</h1>,<h2>同学</h2>,];
ReactDOM.render(<div>{arr}</div>,document.getElementById('example')
);

根据动态数据生成 li

const data = ['A','B','C']
const VDOM = (
<div><ul>
{data.map((item,index)=>{return <li key={index}>{item}</li>})
}
</ul></div>
)
ReactDOM.render(VDOM,document.querySelector('.test'))