React组件

组件

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'})