React-组件开篇

简介: React-组件开篇

组件化开发


  • 组件化开发其实就是分而治之的思想
  • 我们可以将一个完整的界面拆分成多个小的界面, 每个小的界面就是一个组件
  • 每个组件管理自己的状态(数据)和业务逻辑
  • 这样做的既可以提高每个组件的复用性, 又可能降低每个组件的开发难度




定义组件


  • 通过构造函数定义(函数组件, 无状态组件, 展示型组件)
  • 通过类定义(类组件, 有状态组件, 逻辑组件)
  • ... ...




编写组件


在编写组件标题标题中的内容主要是介绍如何定义组件和使用组件的一个过程,还有就是介绍一下组件化开发的过程,和类组件与函数组件的相互结合的使用

新建 index.js 或者修改 create-react-app 创建好的模板当中的这个文件有就修改没有就新增内容如下:

import ReactDom from 'react-dom';
import React from "react";
import App from './App';
ReactDom.render(<App/>, document.getElementById('root'));

紧接着 App.js 同理如上:

import React from 'react';
import './App.css';
class App extends React.Component {
    render() {
        return (
            <div>
                <div className={'header'}>头部</div>
                <div className={'main'}>中间</div>
                <div className={'footer'}>底部</div>
            </div>
        )
    }
}
export default App;

App.css:

.header {
    background: red;
}
.main {
    background: green;
}
.footer {
    background: blue;
}


运行效果如下:

如上定义的是一个类组件,如果这个时候我们想将当中的中部头部底部个个部分的内容都抽离成为一个小的组件那么该如何进行编写呢,那么就来看看这一块的用法吧,关于头部中部底部的组件博主使用的是函数组件来进行定义,这样就可以顺便的看到类组件与函数组件的结合使用的情况:

Header.js:

import React from 'react';
import './Header.css'
function Header() {
    return (
        <div className={'header'}>我是头部</div>
    )
}
export default Header;


Header.css:

.header {
    background: red;
}


Main.js:

import React from 'react';
import './Main.css'
function Main() {
    return (
        <div className={'main'}>我是中间</div>
    )
}
export default Main;


Main.css:

.main {
    background: green;
}


Footer.js:

import React from 'react';
import './Footer.css'
function Footer() {
    return (
        <div className={'footer'}>我是底部</div>
    )
}
export default Footer;

Footer.css:

.footer {
    background: blue;
}


然后就是 App.js 类组件当中进行使用的代码了:

import React from 'react';
import './App.css';
import Footer from "./components/Footer";
import Main from "./components/Main";
import Header from "./components/Header";
class App extends React.Component {
    render() {
        return (
            <div>
                <Header/>
                <Main/>
                <Footer/>
            </div>
        )
    }
}
export default App;

使用的方式其实和博主之前文章当中介绍的使用是一样的,这里使用这样的方式定义和使用主要是说明一点,React 是支持类组件与函数式组件的混用的,好啦,本文到此结束。


最后

本期结束咱们下次再见👋~

🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

相关文章
|
6月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
357 0
|
6月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
75 0
|
6月前
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
76 0
|
6月前
|
存储 前端开发 JavaScript
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
75 0
|
6月前
|
前端开发 开发者
【第26期】一文读懂React组件编写方式
【第26期】一文读懂React组件编写方式
62 0
|
6月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
121 0
|
6月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
52 1
|
6月前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
119 1
|
6月前
|
存储 前端开发 JavaScript
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
|
6月前
|
缓存 前端开发 API
探索 React Hooks 的世界:如何构建出色的组件(上)
探索 React Hooks 的世界:如何构建出色的组件(上)
探索 React Hooks 的世界:如何构建出色的组件(上)