React-组件开篇

组件化开发

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

定义组件

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

编写组件

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

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

代码语言：javascript复制

import ReactDom from 'react-dom';
import React from "react";
import App from './App';

ReactDom.render(<App/>, document.getElementById('root'));

紧接着 App.js 同理如上：

代码语言：javascript复制

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：

代码语言：css复制

.header {
    background: red;
}

.main {
    background: green;
}

.footer {
    background: blue;
}

运行效果如下：

image-20220410131345712

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

Header.js：

代码语言：javascript复制

import React from 'react';
import './Header.css'

function Header() {
    return (
        <div className={'header'}>我是头部</div>
    )
}

export default Header;

Header.css：

代码语言：css复制

.header {
    background: red;
}

Main.js:

代码语言：javascript复制

import React from 'react';
import './Main.css'

function Main() {
    return (
        <div className={'main'}>我是中间</div>
    )
}

export default Main;

Main.css:

代码语言：css复制

.main {
    background: green;
}

Footer.js:

代码语言：javascript复制

import React from 'react';
import './Footer.css'

function Footer() {
    return (
        <div className={'footer'}>我是底部</div>
    )
}

export default Footer;

Footer.css:

代码语言：css复制

.footer {
    background: blue;
}

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

代码语言：javascript复制

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 是支持类组件与函数式组件的混用的，好啦，本文到此结束。

输入图片说明

最后

本期结束咱们下次再见