React中组件的创建方式和传值

本篇文章我们来学习组件的创建，两种组件的形式，以及如何在组件直接进行通信。

两种创建形式

1.组件有两种创建形式，一种是函数的形式，一种是类的形式，具体如何操作？
在 src 下新建 components 文件夹，再新建 CompType.js ，具体代码如下：

import React from 'react';

//  函数类型的组件
export function Welcome1() {
    return (
        <div>
        Welcome1
        </div>
    )
}

// 基于类的组件
export class Welcome2 extends React.Component{
    render(){
      return <div>Welcome2</div>
    }
}

2.然后在 src -> index.js 导入组件，再使用，具体代码如下：

import { Welcome1, Welcome2 } from './components/CompType'

function App() {
  return (
    <div>
      {/* 使用其他组件 */}
      <Welcome1></Welcome1>
      <Welcome2></Welcome2> 
    </div>
  );
}

比较：

如果一个组件只根据 props 渲染页面，没有内部的 state ，我们完全可以用函数组件的形式来实现( hooks 的到来会改变这个现状)

props属性传递

根据上面的例子，如果我想给组件 Welcome1 和组件 Welcome2 添加属性，那我要怎么传递呢，请继续往下看
1.修改 CompType.js 中两种组件形式的代码如下：

//  函数类型的组件
export function Welcome1(props) {
    return (
        <div>
        Welcome1,{props.type}
        </div>
    )
}

// 基于类的组件
export class Welcome2 extends React.Component{
    render(){
    return <div>Welcome2,{this.props.type}</div>

    }
}

注意：

基于类的组件 使用 props 属性值时，要加当前 this 实例

2.继续修改 src -> index.js 导入组件的方式，代码如下：

function App() {
  return (
    <div>
     {/* 使用其他组件 */}
      <Welcome1 type="function"></Welcome1>
      <Welcome2 type="class"></Welcome2>
    </div>
  );
}

注意：

此时传进来的 props 值是只读属性，不可修改，单向数据流