react 介绍
- 用于构建用户界面的 JavaScript 库
- react主要用于构建UI,MVC中的V(视图)
- 起源于Fackbook的内部项目(2013年5月开源)
- react拥有高性能,代码逻辑简单
React特点
- 声明式的设计
react采用声明范式,可以轻松描述应用 - 高效
通过对DOM的模拟,最大限度的减少了于DOM的交互 — 虚拟DOM - 灵活
可以和已知库和第三方框架很好的整合 - 组件
提高代码的复用性5.单向响应的数据流
webpack 构建react应用
cnpm i react react-dom -S
1.体验
- src/index.js
2.代码说明
// react相关的基础库,必须引入,特别是写到组件的时候
import React from 'react'
// ReactDOM 以前是包含在React对象内部,后来分离了出来
// 给DOM节点渲染数据,渲染视图使用 ---- React Dom操作
import ReactDOM from 'react-dom'
// ReactDOM.render() 给某个DOM节点渲染react的视图
// react视图: react元素 / react组件
// React视图 记住 只能有一个顶级标签
// React 语法 符合 jsx 语法 - javascriptxml 语法 - 类xml语言 - 标签必须拥有顶级标签
// ReactDOM.render(视图, DOM节点)
ReactDOM.render(<h1>hello react</h1>, document.getElementById('app'))
3.react元素
元素是构成react应用的最小单位,它用于描述屏幕上输出的内容
import React from 'react'
import ReactDOM from 'react-dom'
// react元素
// 元素是构成react应用的最小单位,它用于描述屏幕上输出的内容
const element = <h1>hello react 元素</h1>
/**
* 元素
* 与浏览器的DOM元素不同
* react中的元素事实上是普通js对象
*
* ReactDOM可以确保浏览器DOM的数据内容于React元素保持一致
*/
ReactDOM.render(element, document.getElementById('app'))
React 元素是不可变对象。一旦被创建,你就无法更改它的子元素或者属性。一个元素就像电影的单帧:它代表了某个特定时刻的 UI。
- 疑问:如何更新react元素渲染
再特定的时间中 重新渲染一个新的元素