vue
<title>Vue App</title>
<body>
<h1>Vue App</h1>
<hr />
<div id="root"></div>
<script src="https://unpkg.com/vue@3" crossorigin></script>
<script>
const Father = Vue.createApp({
data() {
return {
fatherState: "Father-original state"
};
},
methods: {
changeState: function () {
console.log("-----change Father state-----");
this.fatherState = "Father-new state";
}
},
render() {
console.log("Father:render");
return Vue.h("div", {
}, [
Vue.h("h2", this.fatherState),
Vue.h("button", {
onClick: this.changeState }, "change Father state"),
Vue.h("hr"),
Vue.h(Vue.resolveComponent("child"))
]);
}
});
Father.component("child", {
data() {
return {
childState: "Child-original state"
};
},
methods: {
changeState: function () {
console.log("-----change Child state-----");
this.childState = "Child-new state";
}
},
render() {
console.log("child:render");
return Vue.h("div", {
}, [
Vue.h("h3", this.childState),
Vue.h("button", {
onClick: this.changeState }, "change Child state")
]);
}
});
Father.mount("#root");
</script>
</body>
react
<title>React App</title>
<body>
<h1>React App</h1>
<hr />
<div id="root"></div>
<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
class Father extends React.Component {
state = {
fatherState: "Father-original state"
};
changeState = () => {
console.log("-----change Father state-----");
this.setState({
fatherState: "Father-new state" });
};
render() {
console.log("Father:render");
return (
<div>
<h2>{
this.state.fatherState}</h2>
<button onClick={
this.changeState}>change Father state</button>
<hr />
<Child />
</div>
);
}
}
class Child extends React.Component {
state = {
childState: "Child-original state"
};
changeState = () => {
console.log("-----change Child state-----");
this.setState({
childState: "Child-new state" });
};
render() {
console.log("child:render");
return (
<div>
<h3>{
this.state.childState}</h3>
<button onClick={
this.changeState}>change Child state</button>
</div>
);
}
}
ReactDOM.render(<Father />, document.getElementById("root"));
</script>
</body>