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

React是什么？

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

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

React有什么特点

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

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'))
1
2
3
4
5
6
7
8

Jsx创建

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

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

Jsx语法

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

注释

写在花括号里

ReactDOM.render(
	<div>
		<h1>小丞</h1>
		{/*注释...*/}
	</div>,document.getElementById('example')
);
1
2
3
4
5
6

数组

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

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

根据动态数据生成 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'))
1
2
3
4
5
6
7
8
9
10
11