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,创建嵌套格式的domconst VDOM=React.createElement('h1',{id:'title'},React.createElement('span',{},'hello,React'))//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.querySelector('.test')) Jsx创建 //1.创建虚拟DOMconst VDOM = (/* 此处一定不要写引号,因为不是字符串 */<h1 id="title"><span>Hello,React</span></h1>)//2.渲染虚拟DOM到页面ReactDOM.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'))