组件
react的组件有两种,一是函数组件,本质就是js的函数;二是class组件,是一个继承于React.Component 的组件。
1.函数组件
function Welcome(props) {//组件名称必须要以大写开头,小写会被认为是html原生的标签
return <h1>hello {props.name}</h1>
}
函数接收一个参数就是组件的传入值。
2.class组件
class Welcome1 extends React.Component{
render(){
return <h1>hello {this.props.name}</h1>
}
}
而在vue中定义一个组件是这样的:
<template>
<div>
<h1>hello {{name}}!</h1>
</div>
</template>
<script>
export default {
props:["name"],
}
</script>
也会接受props传入的参数。
渲染组件
function Welcome(props) {
return <h1>hello {props.name}</h1>
}
class Welcome1 extends React.Component {
render() {
return <h1>hello {this.props.name}</h1>
}
}
const element = <div>
<Welcome name={"world"}></Welcome>
<Welcome1 name={"world"}></Welcome1>
</div>
ReactDOM.render(
element,
document.getElementById('root')
);
渲染过程:
1.调用ReactDOM渲染函数,将定义的好的element作为参数传入;
2.React调用组件Welcome和Welcome1组件,将name传入组件中;
3.Welcome组件返回<h1>hello world</h1>,Welcome1组件返回<h1>hello world</h1>;
4.React更新DOM为<h1>hello world</h1>;
如果将上述的代码写入到App.js文件中,如下:
App.js文件:
function Welcome(props) {
return <h1>hello {props.name}</h1>
}
class Welcome1 extends React.Component {
render() {
return <h1>hello {this.props.name}</h1>
}
}
function App() {
const element = <div>
<h1>hello world!</h1>
<Welcome name={"fjw"}></Welcome>
<Welcome1 name={"fjw1"}></Welcome1>
</div>
return (
element
);
}
export default App;
这就是一个组合组件,App是一个组件,它组合了Welcome和Welcome1组件,道理都是一样;先调用App组件,再调用Welcome和Welcome1组件,将更改好的元素作为返回值返回到App,再由App暴漏出去,index.js文件中引入,最终渲染到DOM节点上。
注意:组件间传递的参数props是不能被修改的。
function Welcome(props) {
props.name="world1"
return <h1>hello {props.name}</h1>
}
就会报错:
在vue当中渲染一个组件:
写一个vue文件:hi.vue
<template>
<div>
<h1>hello {{name}}!</h1>
</div>
</template>
<script>
export default {
//定义由父组件传入的name
props:["name"],
}
</script>
将vue文件注册成一个组件:test.vue
<template>
<div>
//3.使用my-hello,传入name
<my-hello :name="world"></my-hello>
</div>
</template>
<script>
//1.引入hi.vue
import hi from "./hi"
export default {
name: "test",
//2.将hi.vue注册成组件my-hello
components: {
"my-hello": hi
},
data(){
return{
world:"world"
}
}
}
</script>
挂载(vue3.x):main.js
import { createApp } from 'vue'
import test from "@/views/test";
createApp(test).mount('#app')
vue2.x main.js
import Vue from 'vue';
new Vue({el: '#app'})