浅谈React和VDom关系
组件化
- 组件的封装
- 组件的复用
组件的封装
- 视图
- 数据
- 视图和数据之间的变化逻辑
import React, {Component} from 'react'; export default class List extends Component{
constructor(props){
super(props);
this.state = { //数据
list:this.props.data,
}
}
render() {
return (
<div>
<ul>
{this.state.list.map(function(item,index){
return (<li key={index}>{item}</li>);
})}
</ul>
</div>
)
}
}
组件的复用(通过props传递)
import React, {Component} from 'react';
import List from './list'; //组件
import Title from './title';//组件
export default class Todo extends Component{
constructor(props){
super(props);
this.state = {
list:['Foo','Bar'],
}
}
todoList (item){
this.state.list.push(item);
const newList=this.state.list;
this.setState({
list:newList,
})
}
render() {
return (
<div>
<Title todoList={this.todoList.bind(this)} />
<List data={this.state.list}/>
<Title todoList={this.todoList.bind(this)} /> //复用
<List data={[1,2,3]}/> //复用
</div>
)
}
}
JSX
React引入JSX,并将它作为了一个独立的标准开放,React.createElement也是可以自定义去修改的,
jsx语法(语法糖)需要转成js
ReactElement createElement( // 参数——标签\属性\子元素
string/ReactClass type,
[object props],
[children ...]
)
npm i babel-cli -g
npm i --save-dev babel-plugin-transform-react-jsx
新建.babelrc文件,添加
{
"plugins": ["transform-react-jsx"]
}
在项目根目录中运行babel --plugins transform-react-jsx src/components/todo/index.js
经过编译:转化成React.createElement,类似于vitual dom 的 h 函数
import React, { Component } from 'react';
import List from './list'; //组件
import Title from './title'; //组件
export default class Todo extends Component {
constructor(props) {
super(props);
this.state = {
list: ['Foo', 'Bar']
};
}
todoList(item) {
this.state.list.push(item);
const newList = this.state.list;
this.setState({
list: newList
});
}
render() {
return React.createElement(
'div', //直接渲染
null,
React.createElement(Title, { todoList: this.todoList.bind(this) }), //转化成React.createElement
React.createElement(List, { data: this.state.list }), //List 是自定义构造函数,List 组件必须有render
React.createElement(Title, { todoList: this.todoList.bind(this) }),
React.createElement(List, { data: this.state.list })
);
}
}
React.createElement(List, { data: this.state.list }), //List 是自定义构造函数,List 组件必须有render
相当于var list = new List({data: this.state.list});
var vNode = list.render(); //通过层层的render函数,最终React.createElement html标签
在文件开始添加 /* @jsx h */ 改变 React.createElement
/* @jsx h */
import React, { Component } from 'react';
import List from './list'; //组件
import Title from './title'; //组件
export default class Todo extends Component {
constructor(props) {
super(props);
this.state = {
list: ['Foo', 'Bar']
};
}
todoList(item) {
this.state.list.push(item);
const newList = this.state.list;
this.setState({
list: newList
});
}
render() {
return h(
'div',
null,
h(Title, { todoList: this.todoList.bind(this) }),
h(List, { data: this.state.list }),
h(Title, { todoList: this.todoList.bind(this) }),
h(List, { data: this.state.list })
);
}
}
JSX中的VDom体现
jsx就是模版,最终需要转化成html,初次渲染,修改state后的setState 的re-render,正好适用于vDOM
ReactDOM.render(<App />, document.getElementById('root')); //初次渲染 <App /> JSX对象
//通过vDom的patch(container,vnode),而对于re-render是通过setState
todoList (item){
this.state.list.push(item);
const newList=this.state.list;
this.setState({ //re-render patch(vnode,newVnode)
list:newList,
})
}
源码下载
该随笔相关代码已上传到github,地址:https://github.com/10086XIAOZHANG/ReactVisualDomDemo
浅谈React和VDom关系的更多相关文章
- 【转】浅谈React、Flux 与 Redux
本文转自<浅谈React.Flux 与 Redux>,转载请注明出处. React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化 利用 props 形成 ...
- 浅谈React
浅谈react react是什么?其官网给出了明确定义:A JavaScript library for building user interfaces,一个用于构建用户界面的JavaScript库 ...
- 浅谈React工作原理
浅谈React工作原理:https://www.cnblogs.com/yikuu/p/9660932.html 转自:https://cloud.tencent.com/info/63f656e0b ...
- 浅谈React数据流管理
引言:为什么数据流管理如此重要?react的核心思想就是:UI=render(data),data就是我们说的数据流,render是react提供的纯函数,所以用户界面的展示完全取决于数据层.这篇文章 ...
- 浅谈 React、Flux 与 Redux
React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化利用 props 形成单向的数据流根据 state 的变化来更新 view利用虚拟 DOM 来提升渲染性能 ...
- 浅谈React受控与非受控组件
背景 React内部分别使用了props, state来区分组件的属性和状态.props用来定义组件外部传进来的属性, 属于那种经过外部定义之后, 组件内部就无法改变.而state维持组件内部的状态更 ...
- 浅谈react的初步试用
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- 浅谈React编程思想
React是Facebook推出的面向视图层开发的一个框架,用于解决大型应用,包括如何很好地管理DOM结构,是构建大型,快速Web app的首选方式. React使用JavaScript来构建用户界面 ...
- (进阶篇)浅谈COOKIE和SESSION关系和区别
COOKIE介绍 cookie 常用于识别用户.cookie 是服务器留在用户计算机中的小文件.每当相同的计算机通过浏览器请求页面时,它同时会发送 cookie.通过 PHP,您能够创建并取回 coo ...
随机推荐
- webstorm添加自定义代码块
widnow下使用alt+ctrl+s 调出setting面板 mac下使用command+,(逗号)调出Preferences面板 搜索live template选中js,在javascrpt 模板 ...
- typeof的探讨
console.log(typeof 'abc') // "string" console.log(typeof true )// "boolean" cons ...
- 原生js制作标题与内容保持4行的效果
在制作网页或移动端有时会用到一个效果,类似文章标题和文章描述的排列总是保持一样的行数,要么标题总是一行,多出的省略,要么标题内容1:3或2:2或3:1这样,今天练习这样的效果. 实现的原理:给标题和内 ...
- 28_Future模式1
[Future模式] Future模式类似商品订单.比如在网购时,当看中一件商品时,就可以提交订单,当订单处理完成后,在家里等待商品送货上门即可.或者类似我们发送Ajax请求的时候,页面是异步的进行后 ...
- spring-wind 搭建过程问题记录
最近想搭一个 shiro+ssm的快速开发框架,用于后台管理以及微信公众号的开发.后台主要是权限管理,于是选择有spring+shiro,微信公众号的前端页面搜了下有用velocity开发的,刚好看到 ...
- 使用 Azure CLI 2.0 从自定义磁盘创建 Linux VM
本文说明如何在 Azure 中上传自定义的虚拟硬盘 (VHD) 或复制现有 VHD,并从自定义磁盘创建 Linux 虚拟机 (VM). 可以根据要求安装并配置 Linux 分发版,并使用该 VHD 快 ...
- 关于map容器的元素被无参初始化
使用C++中的map容器定义一个mp,当你执行if语句判断mp[3]是否为1时,那么如果mp[3]以前不存在,此时mp[3]就会被无参初始化,second赋值为0. 以下的程序可以证明这一点.执行了第 ...
- C#中的多线程 - 多线程的使用 z
原文:http://www.albahari.com/threading/part3.aspx 专题:C#中的多线程 1基于事件的异步模式Permalink 基于事件的异步模式(event-based ...
- centos 6 YUM安装 lnmp
准备篇: 1.配置防火墙,开启80端口.3306端口 vi /etc/sysconfig/iptables -A INPUT -m state --state NEW -m t ...
- windows下编译leveldb
前提条件,下载boost库并编译 boost库弄好后,就可以编译leveldb了 首先,下载leveldb-windows,这个github上有 一. 1文件->新建->从现有代码文件创建 ...