react组件

react组件

React组件都是 函数
组件名首字母必须大写
细分 就是function(函数式组件) 和 class(类组件)

function(函数式组件)

import React from "react"
import ReactDOM from "react-dom"

function Com(props) {
    console.log(props);
    // 解构赋值
    let { className, til } = props

    let str = "清欢"
    return <><div className={className} til={til}>
        <h1>{str}</h1>
    </div></>
}

// react 和 vue 组件都是只能有一个根元素(标签) 不过 react 可以使用 <></> 来做一个空标签 减少无用的标签造用
// 把组件行内属性打包成对象传给组件函数
ReactDOM.render(<Com className="qqq" til="qq" />, document.querySelector("#root"))

class(类组件)

注意事项
写class组件必须要写render(){}
render函数名是规定的
render函数的返回结果 就是 组件显示的内容
this.props中存储的都是传递进来的数据 父传子 传进来的数据

import React from "react"
import ReactDOM from "react-dom"

class MyApp extends React.Component {
    // constructor(props) {
    //     super(props)   // 写class继承的时候 若写了 constructor 则必写 super()
    //     // super 对应的就是 React.Component 这个函数体
    //     console.log(props);
    //     console.log(React.Component);
    //     //console.log(this.props);   // super() 若是 super 不传参数 输出 undefined 找不到 this 的指向
    //     console.log(this.props);   // super(props) 若是 super 传参数 输出 传递进来的数据 this 指向当前实例
    // }
    render() {
        // render函数名是规定的
        // render函数的返回结果 就是 组件显示的内容
        // this.props中存储的都是传递进来的数据   父传子 传进来的数据
        console.log(this.props);
        // 解构赋值
        let { className, til } = this.props
        return <div className={"qqq " + className}>
            <h1>长安</h1>
        </div>
    }
}

ReactDOM.render(<MyApp className="aaa" til="bbb"></MyApp>, document.querySelector("#root"))