浅谈React和VDom关系
2024-10-21 09:53:36
组件化
- 组件的封装
- 组件的复用
组件的封装
- 视图
- 数据
- 视图和数据之间的变化逻辑
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
最新文章
- 《Walking the callstack（转载）》
- django ftp 研究
- Java学习笔记-多线程-创建线程的方式
- [NOIP2015] 子串（dp）
- 转: CvMat，Mat和IplImage之间的转化和拷贝
- 【编程题目】n 个骰子的点数
- Metasploit更新
- ActiveMQ之JMSReplyTo
- 使用ajax传递及接收数据
- Sublime Text3 Package Control和Emmet插件安装方法
- 为shell布置陷阱：trap捕捉信号方法论
- Flutter 页面入栈和出栈
- spring AOP capbilities and goal
- POJ 3074 Sudoku(算竞进阶习题)
- linux rescue 修复引导 与linux下修复windows引导
- 【转】dlgdata.cpp line 40 断言失败
- c#:无法将 NULL 转换成“System.DateTime”，因为它是一种值类型
- 使用mybatisgenerator 辅助工具逆向工程
- Word Add-in 函数调用顺序
- .xz文件解压及linux常见压缩