ReactとVdomの関係について
6136 ワード
コンポーネント化アセンブリのパッケージ コンポーネントの多重化 コンポーネントのパッケージングビュー データ ビューとデータとの間の変化論理
コンポーネントの多重化(propsによる伝達)
import React, {Component} from 'react';
export default class List extends Component{
constructor(props){
super(props);
this.state = { //
list:this.props.data,
}
}
render() {
return (
{this.state.list.map(function(item,index){
return (- {item}
);
})}
)
}
}コンポーネントの多重化(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 (
<list data="{this.state.list}/">
<title todolist="{this.todoList.bind(this)}"/> //
<list data="{[1,2,3]}/"> //
</list></list></div>
)
}
}
</code></pre>
</div>
<p> </p>
<h2>JSX</h2>
<p>React JSX, ,React.createElement ,</p>
<p>jsx ( ) js</p>
<div class="cnblogs_Highlighter">
<pre><code>ReactElement createElement( // —— \ \
string/ReactClass type,
[object props],
[children ...]
)
</code></pre>
</div>
<p> </p>
<p>npm i babel-cli -g</p>
<p>npm i --save-dev babel-plugin-transform-react-jsx</p>
<p> .babelrc , </p>
<div class="cnblogs_Highlighter">
<pre><code>{
"plugins": ["transform-react-jsx"]
}</code></pre>
</div>
<p> babel --plugins transform-react-jsx src/components/todo/index.js</p>
<p> : <span style="color:#ff0000;">React.createElement, vitual dom h </span> </p>
<div class="cnblogs_Highlighter">
<pre><code>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 })
);
}
}
</code></pre>
</div>
<pre><code><code/></code></pre>
<code> </code>
<div class="cnblogs_Highlighter">
<code> <pre><code>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 </code></pre> </code>
</div>
<p> </p>
<p> /* @jsx h */ React.createElement</p>
<div class="cnblogs_Highlighter">
<pre><code>/* @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 })
);
}
}
</code></pre>
</div>
<p> </p>
<h2>JSX VDom </h2>
<p>jsx , html, , state setState re-render, vDOM </p>
<div class="cnblogs_Highlighter">
<pre><code>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,
})
}
</code></pre>
</div>
<p> </p>
<h2> </h2>
<p> github, :https://github.com/10086XIAOZHANG/ReactVisualDomDemo </p>
<p> </p>
</div>
<p> :https://www.cnblogs.com/fuGuy/p/9226248.html</p>
</div>
</div>
</div>
</div>