zoukankan      html  css  js  c++  java
  • react之创建组建并使用props

    
    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)和生命周期函数所以的话运行效率会高一些

  • 相关阅读:
    fiddler 抓https坑
    20171029机器学习之特征值选择
    20171028机器学习之线性回归过拟合问题的解决方案
    使用Matplotlib画对数函数
    对朴素贝叶斯的理解(python代码已经证明)
    解决Mac系统下matplotlib中文显示方块问题
    个人工作总结08(第二次冲刺)
    个人工作总结07(第二次冲刺)
    个人工作总结06(第二次冲刺)
    个人工作总结05(第二次冲刺)
  • 原文地址:https://www.cnblogs.com/c-x-a/p/13192604.html
Copyright © 2011-2022 走看看