React中组件创建使用和Vue中组件创建使用的区别

一、Vue中组件的创建和使用

1、基本示例

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

2、组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 button-counter
(1) 我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo">
  <button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' })

(2)注意：

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods
以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

二、React中组件的创建和使用

1、React中，组件的创建和使用有两种方式：

(1)使用ES6中的class(即：类)来定义React中的组件
(2)编写JavaScript 函数从而来定义React中的组件

2、第一种，使用ES6中的class(即：类)来定义React中的组件

(1)在自定义的app.jsx中，定义APP组件：

import React from "react";

//1、创建组件的第一种方式:用类的形式创建组件,Hook形式
class App extends React.Component{
  //渲染函数
  render() {
    return (
      <h1>你好,react组件</h1>
    )
  }
}

export default App;

(2)在自定义的index.js中，使用App组件：

//导入App组件
import App from './app';
//React.render和ReactDOM.render的使用区别见上一篇博客
ReactDOM.render(
  <App></App>,//使用A组件
  document.getElementById('root')//将App组件挂载到id为root的元素里面
);

(3)注意:

1)组件文件的后缀可以是js,也可以是jsx, 使用jsx后缀的组件文件时，vscode提示词更多

2)一个React项目,是由成千上万个组件组成，组件之间环环嵌套

3、第二种，编写JavaScript 函数从而来定义React中的组件
(1)定义组件最简单的方式就是编写 JavaScript 函数：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

(2)该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

4、渲染组件
(1)之前，我们遇到的 React 元素都只是 DOM 标签：

const element = <div />;

(2)不过，React 元素也可以是用户自定义的组件：

const element = <Welcome name="Sara" />;

(3)当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。例如，这段代码会在页面上渲染 “Hello, Sara”：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

(4)让我们来回顾一下这个例子中发生了什么：

1、我们调用 ReactDOM.render() 函数，并传入 <Welcome name="Sara" /> 作为参数。
2、React调用 Welcome 组件，并将 {name: 'Sara'} 作为 props 传入。
3、Welcome 组件将 <h1>Hello, Sara</h1> 元素作为返回值。
4、React DOM 将 DOM 高效地更新为 <h1>Hello, Sara</h1>。

(5)注意：组件名称必须以大写字母开头。

1、React 会将以小写字母开头的组件视为原生 DOM 标签。 例如，<div /> 代表 HTML 的 div 标签，而<Welcome /> 则代表一个组件， 并且需在作用域内使用 Welcome。