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'))