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")
)