05月01, 2018

React学习之旅 (03) -- 组件和props

组件在react中非常重要,所谓组件,其实在react中就是‘类’的概念,类的定义形式,ES6是class, ES5是函数。

注意:组件名字,首字母大写

定义方式一 (无生命周期, 无状态,this指向乱):

function Title(props)
{
    // props是一个对象,里面存的就是组件传过来的值,这里指的就是 name和num变量
    return <h2>{props.name}: 欢迎来捡漏, 关注度: {props.num}</h2>
}
ReactDOM.render(<Title name="标题" num="100" />, document.getElementById('root'));

定义方式二 (有生命周期, 有状态,this指向靠谱):

class Title extends React.Component{
    render(){
        // this.props 这里存的就是传过来的值
        // 我们可以解构出来,就像下面这样:
        let {name, num} = this.props;
        return <h2>{name}:来捡漏, 关注度:{num}</h2>
    }
}
ReactDOM.render(<Title name="标题" num="100" />, 
document.getElementById('root'));

本文链接:http://www.laijianlou.top/post/react-03.html

-- EOF --

Comments