React 组件-基础

组件

组件让你可以将用户界面分成独立的，可复用的小部件，并可以对每个部件进行单独的设计

• 编写组件的好处：

1. 提高可复用性，可维护性
2. 组件组合构成UI界面，更方便删除和替换
3. 方便对单独组件功能进行测试

React组件的分类

1. 函数式组件

function createE(props) {
    return <h2><span>{props.title}</span></h2>
}
ReactDOM.render(<div>{createE({title:'Hello React!'})}</div>, document.getElementById('root'));

• 函数组件标签化

/**
 * 
 * 标签式组件：首字母要大写 
 */
function CreateE(props) {
    return <h2><span>{props.title}</span></h2>
}
ReactDOM.render(<div><CreateE title='123'/></div>, document.getElementById('root'));

2. 类组件

/**
 * 类组件
 */
class Test {
    render() {
        return  <h2><span>类组件</span></h2>
    }
}
ReactDOM.render(<div>{new Test().render()}</div>, document.getElementById('root'));

• 类组件的标签化

class Test extends React.Component{
    render() {
        return  <h2><span>类组件-标签化-需要类继承React.Component</span></h2>
    }
}
ReactDOM.render(<div><Test/></div>, document.getElementById('root'));

• 类组件的标签化传值

/**
 * 类组件-标签形式的传值
 */
class Test1 extends React.Component{
    render() {
        // 在类中读取值，值都在this.props
        return  <h2><span>{this.props.title}--{this.props.dd}</span></h2>
    }
}
ReactDOM.render(<div><Test1 title="我是title" dd="我是dd"/></div>, document.getElementById('root'));

函数式组件 VS 类组件

• 函数式组件比较轻，输入数据输出显示UI信息展示，没有状态，没有生命周期
• 类组件比较重，用来展示，有自己的状态，有生命周期