01 React初步认知、React元素、渲染、工程化
定义
- react:用于构建用户界面的 JavaScript 库 (仅负责View层渲染、应在视图上体现交互逻辑)
- vue:渐进式JavaScript 框架(MVVM)
使用
- 引入CDN脚本
- 添加根容器 div #app
- 创建React组件
ReactDOM.render
- ReactDOM → render → 虚拟DOM → 真实DOM(放入容器)
React.create
- 创建React元素 → 虚拟节点 → 真实节点
const oSpan = React.createElement('span', {className: 'text'
}, '子节点span')
ReactDOM.render(React.createElement('h1', {// 属性'data-tag': 'h1'}, [oSpan]),// 容器document.getElementById('app')
)
React组件
- React.Component
- 渲染视图必须放入render函数,且return视图
// 继承 使用React提供的关于组件的api
class MyButton extends React.Component {constructor(props) {super(props)this.state = {openStatus: false}}// 渲染视图必须放入render函数,且return视图render() {return '视图'}
}
class MyButton extends React.Component {constructor(props) {super(props)this.state = {openStatus: false}}render() {// 渲染视图必须放入render函数,且return视图const oP = React.createElement('p', {key: 2}, this.state.openStatus ? 'open状态' : "close状态")const oBtn = React.createElement('button', {key: 1,onClick: () => {this.setState({openStatus: !this.state.openStatus})}}, this.state.openStatus ? '关闭' : "打开")const wrapper = React.createElement('div', {}, [oP, oBtn])return wrapper}
}
工程化
npx create-react-app my-first-react-app
// npx:npm5.2 + 的包运行工具
create-react-app
// 脚手架工具:内部的工程化 → babel/webpack
cd my-first-react-app
yarn start/npm start
初始化目录
- 不必要的可以删除
App.js
function App() {return (<div className="App"></div>);
}export default App;
import { Component } from 'react'
class App extends Component {render() {return (<div className="App" >11111</div>);}
}export default App;
01 React初步认知、React元素、渲染、工程化相关推荐
- react学习(43)----react中将一个元素渲染为 DOM
假设你的 HTML 文件某处有一个 <div>: <div id="root"></div> 我们将其称为"根" DOM 节 ...
- 初步了解React Native的新组件库firstBorn
first-born is a React Native UI Component Framework, which follows the design methodology Atomic Des ...
- react native text换行_基于React+Koa实现React SSR服务端渲染
React Server-Side Rendering 其实这个概念很早之前就有了解了,出于没有应用场景原因,之前一直都只停留在了解API的层面,未曾去实践.快到周末闲来无事,自己复盘了下之前做的新商 ...
- 【React学习】React更新渲染原理
当我们调用 setState 之后发生了什么?react经历了怎样的过程将新的 state 渲染到页面上? 一次react更新,核心就是对虚拟dom进行diff,找出最少的需要变化的dom节点,然后对 ...
- [react] 什么是浅层渲染?
[react] 什么是浅层渲染? 当为 React 写单元测试时,浅层渲染(Shallow Renderer) 会变得十分有用.浅层渲染使你可以渲染 "单层深度" 的组件,并且对组 ...
- [react] 在React中组件和元素有什么区别?
[react] 在React中组件和元素有什么区别? 组件首字母大写 组件是由元素构成的.元素数据结构是普通对象,而组件数据结构是类或纯函数 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚 ...
- [react] React怎样跳过重新渲染?
[react] React怎样跳过重新渲染? 生命周期 shouldComponentUpdate return false ? 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持 ...
- [react] 如何提高组件的渲染效率呢?
[react] 如何提高组件的渲染效率呢? 类组件: 1.继承PureComponent 2.使用shouldComponentUpdate优化 函数组件: 1.memo模拟PureComponent ...
- [react] 怎样有条件地渲染组件?
[react] 怎样有条件地渲染组件? {condition && <Component />} or {condition ? <Component /> : ...
最新文章
- 中国信通院《新型智慧城市发展研究报告》
- Java 异常处理的 9 个最佳实践 1
- html瀑布式原理,纯css3+html瀑布流效果
- Gossip算法原理
- Oracle数据库迁移-基础
- BestCoder-Round#38
- 【C语言】控制台窗口图形界面编程(七):鼠标事件
- Angular list列表绑定的一个例子
- MS SQL SERVER数据库简单回顾
- 函数式编程 -- 测试题集
- linux中sleep详解实例
- jQuery 学习-DOM篇(三):jQuery 在 DOM 外部插入元素
- Android系统的开机画面显示过程分析(12)
- 数值作业:改进欧拉法求常微分方程C语言代码
- 文本串加密和解密程序
- 三相电压型PWM整流器设计
- ios使用theos tweak logify.pl自动hook .h头文件中所有的方法
- 苹果服务器国内维护,苹果中国iCloud服务器数据开始转移,这些问题你要注意!...
- [论文分享] Stegozoa: Enhancing WebRTC Covert Channels with Video Steganography for Internet Censorship
- 删除自定义reg注册表
热门文章
- python环境配置opencv_【Python】python2.7 安装配置OpenCV2
- global在python_在Python中使用“global”关键字
- matlab2014a 3d标定,[转载]张的matlab摄像机标定
- Mono,CLR,.net,Net Framework之间的关系
- PCA的原理及MATLAB实现
- AOP集成防止连续多次点击问题
- git 删除远程分支和本地分支
- C++解析-外传篇(1):异常处理深度解析
- 异步下载圆形进度条显示进度
- 201521145048《Java程序设计》第11周学习总结