MENU

React学习笔记【4】

第五节

React组件

  1. 函数式组件:函数内部不需要再有函数,静态组件
  2. 类组件:动态组件,一般会有动态交互。类能实现的,函数不一定能实现
  3. 复合组件:组件中又有其他的组件,复合组件里既可以有类组件,又可以有函数组件

函数式组件与类组件的区别和使用

函数式比较简单,一般用于静态没有交互事件内容的组件页面
类组件,一般又称为动态组件,一般会有交互或者数据修改的操作


本节代码

import React, { Component } from 'react';
import ReactDOM from 'react-dom';


//函数式组件
function Children(props) {
    let title = <h2>副标题</h2>
    let weather = props.weather
    let isGo = weather == 'rainy' ? "NO" : "YES"

    console.log(props);
    return (
        <div>
            <h1>函数式组件 Hello world!</h1>
            {title}
            <div>
                是否出门?
                <span>{isGo}</span>
            </div>
        </div>
    )
}


//类组件定义
class HelloWorld extends React.Component {
    render() {
        console.log(this);
        return (
            <div>
                <h1>类组件</h1>
                <h2>Hello {this.props.name}</h2>
                <Children weather={this.props.weather} />
            </div>
        )
    }
}


ReactDOM.render(
    // <Children weather="sunny" />
    <HelloWorld name="react" weather="rainy" />
    ,
    document.getElementById("root")
)

文章标题:React学习笔记【4】
如果文中内容侵犯了您的权益,请及时与博主取得联系进行删除!
本站文章未经许可禁止转载,本文地址:https://blog.wanvale.com/archives/238/

Archives QR Code Tip
QR Code for this page
Tipping QR Code