react之创建组建并使用props

Posted 2020-12-12 c-x-a

import React from "react"
import ReactDOM from "react-dom"
import ‘./index.css‘
import * as serviceWorker from ‘./serviceWorker‘
import Hello from "./components/Hello"

const user = {
    name: "liming",
    age: 23,
    gender: "男"
}

class Hello2 extends React.Component {
    //render实例方法 主要用来渲染组建
    render() {
        //在class里创建组建，直接通过this.props访问即可
        return <div>这里是{this.props.name}</div>
    }
}

//使用...展开运算符将数组和对象展开。
ReactDOM.render(
    <div>
    <Hello {...user}>
    </Hello>
    <hr/>
        <Hello2 {...user}></Hello2>
    </div>
    ,
    document.getElementById("root"))
serviceWorker.unregister();

除了class创建组建外我们还可以通过下面的方式
文件src/components/Hello.jsx

//  第一种创建组建的方式 一个普通的构造函数就是一个组建。
//  组建的首字母必须大写
import React from "react";

//创建并导出组建 第一种方法
export default function Hello(props) {
    //如果组建中return null，表示该组建不渲染。
    //props是只读的 后面使用state解决改值的问题。
    return <div>
        你好,我是{props.name}
        ,性别{props.gender}
        ,今年{props.age}岁
    </div>
}


//把组建暴露出去
//export default Hello

那么到底使用哪种方式？

我们把通过function关键字创造构造函数创建出来的组件称之为“无状态组件”。
把使用class方式创建的组建称之为 “有状态组件"。

什么区别？

function创建的组件只有props属性，没有自己的私有数据和生命周期函数。
class 都有。

什么时候选用？

如果不使用this.state属性，也就是不需要更新页面的值，那么这个时候就可以使用无状态组件的创建方式了。因为无状态组件没有私有数据(this.state)和生命周期函数所以的话运行效率会高一些