函数组件基本使用及点标记组件写法

函数组件的基本使用

函数组件是比类组件编写起来更简单的一种组件形式，对比如下：

// 类组件
class Welcome extends React.Component {
    render(){
        return (
            <div>hello world</div>
        );
    }
}
// 函数组件
let Welcome = () => {
    return (
        <div>hello world</div>
    );
}

基本对比外，还可以在函数组件中完成，父子通信，事件，默认值等操作，代码如下：

let Welcome = (props) => {
    const handleClick = () => {
        console.log(123);
    }
    return (
        <div>
            <button onClick={handleClick}>点击</button>
            <div>hello world, { props.count }</div>
        </div>
    );
}
Welcome.defaultProps = {
    count: 0
}
Welcome.propTypes = {
    count: PropTypes.number
}

点标记组件写法

无论是函数组件还是类组件，都可以进行点标记的写法操作组件。

const Imooc = {
    Welcome: class extends React.Component {
        render(){
            return (
                <div>hello Welcome</div>
            )
        }
    },
    Head: () => {
        return (
            <div>hello Head</div>
        )
    }
}
let element = (
    <div>
        <Imooc.Welcome />
        <Imooc.Head />
    </div>
);

这种写法，适合复杂组件的形式，可扩展子组件进行组合使用，更加具备语义化操作。