react.js从入门到精通(四)——组件的基本使用

react.js从入门到精通(四)——组件的基本使用

web端三大框架react、vue和angular,本篇教程介绍react的从入门到精通。


七、组件使用的场景

(1)一个.js文件中代码量过大,不好维护。

(2)某些功能或样式在项目中大范围使用,组件起到了封装代码的作用。


1、组件的基本用法

(1)未使用组件时

代码如下:

demo2代码

import React,{ Component } from 'react'
class Demo2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  render() {
    return (
      <div style={{width:"100%",height:"300px",fontSize:"20px",textAlign:"center",backgroundColor:"#ccc"}}>
      Demo2
      </div>
    )
  }
}
export default Demo2


效果如下:

image.png



2、使用组件引入方式

代码如下:

demo2代码引入demo3组件

import React,{ Component } from 'react'
import Demo3 from './demo3.js'
class Demo2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  render() {
    return (
      <div style={{width:"100%",height:"300px",fontSize:"20px",textAlign:"center",backgroundColor:"#ccc"}}>
      Demo2
      <Demo3/>
      </div>
    )
  }
}
export default Demo2


效果如下:

image.png



demo3部分代码:

import React,{ Component } from 'react'
class Demo3 extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  render() {
    return (
      <div style={{width:"100%",height:"300px",fontSize:"20px",textAlign:"center",backgroundColor:"#eee"}}>
      Demo3
      </div>
    )
  }
}
export default Demo3

注意:一个新的组件同样具备完整的生命周期。


如果你对上面的一无所知的话可以访问追梦猪git下载demo实现快捷开发,省掉安装的步骤

追梦猪react项目demo实例(https://github.com/jiawenguang/React-demo.git)

可以通过git clone方式下载项目结构。


追梦猪网站致力于前端分享申明:本站内容搜集整理而来请勿商业用途,仅供交流所用,如若侵犯您的权益请邮件站长进行删除!

文明浏览请勿传播非法内容