React组件的学习笔记(2) - 组件的创建

1. 类组件(Class)

  • ES6的加入让JavaScript直接支持使用class来定义一个类，react创建组件的方式就是使用的类的继承，ES6 class 是目前官方推荐的使用方式，它使用了ES6标准语法来构建，看以下代码：

代码展示:

  • classComponent.js组件
/* ---------------------- React中的类组件(class) ------------------------- */
/* ------------------- 复习es6中的类知识 -------------------- */ 
// 定义一个类
class Test {
    constructor(){//构造函数实现属性的动态赋值
        this.a = 1
    }
    testA(){ // 类中的公共方法A
        console.log('test A');
    }
}

// 继承一个类
class childrenTest extends Test{
    testC(){
        console.log('test C');
    }
}

var obj = new childrenTest()
obj.testA() //输出公共方法
console.log(obj);//打印对象
/* -----------------------------------------------------(以上存为展示代码,不能写入组件中) */

/* ---------------------- React中创建类组件(class) ------------------- */
// 1. 引入react
import React from 'react'
// 2. 创建class类 继承react中内置的组件实现响应式
class App extends React.Component{
    render(){
        // 需要有返回值且返回值必须为jsx格式
        return (
            <div>
                <h1>Hello! React!</h1>
            </div>
        )
    }
}

// 3. 导出class类
export default App
  • index.jsReact项目入口文件
import React from 'react'//1.引入react
// import ReactDOM from 'react-dom'//2.引入react-dom //react17
import * as ReactDOM from 'react-dom/client'; // react18
import App from './01-base/01-classComponent.js' // 引入我们设置好的类组件(class),需为大写

// ReactDOM.render( // react17
//		<App/>
//     document.getElementById('root')
// )

// react 18
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);// 渲染我们自己定义的app组件(直接使用自闭合标签包裹组件名即可,切记组件名一定要大写)

结果展示:

image

2. 函数组件

  • 函数组件就非常的简单了,直接将组件的内容写成函数的返回值即可,如下:

代码展示

  • functionComponent.js(函数组件)
/* --------------  函数组件 ---------------- */
// 1. 创建一个函数
function App(){
    return (
        <div>你好! React!!</div>
    )
}

// 2. 暴露函数
export default App
  • index.js
/* --------------- react项目入口文件 ---------------- */

import React from 'react'//1.引入react
// import ReactDOM from 'react-dom'//2.引入react-dom //react17
import * as ReactDOM from 'react-dom/client'; // react18

import App from './01-base/02-functionComponent.js' // 引入我们设置好的函数组件(function)

// ReactDOM.render( // react17
//     <h1>欢迎进入React的世界</h1>,
//     // 渲染到哪里(函数式编程)
//     document.getElementById('root')
// )

// react 18
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);// 渲染我们自己定义的app组件(直接使用自闭合标签包裹组件名即可,切记组件名一定要大写)
  • 但是在react16.8版本以前,函数式组件是不存在状态的,那时是不推荐使用函数式组件的,较为推崇使用类组件,但是在React16.8版本以后更新了React hooks,函数组件就有了状态,与类组件平起平坐了,到现在我们更推崇使用函数组件结合react hooks一起使用!

3. 组件间的嵌套

  • 组件间的嵌套其实也是非常简单的, 我们只需要将每一个子组件定义好然后暴露出去,在对应的父组件中引入渲染即可,但是最好只设置一个App组件作为所有组件的父级组件

代码展示:

  1. 子级组件导航栏(Naviber.js)
/* -------- 外部组件1:导航栏组件 ----------- */
import React, { Component } from 'react'

export default class Naviber extends Component {
  render() {
    return (
      <div>导航栏组件</div>
    )
  }
}
  1. 子级组件底部footer(Footer.js)
/* -------- 外部组件2:底部组件 ----------- */
import React, { Component } from 'react'

export default class Naviber extends Component {
  render() {
    return (
      <div>底部组件</div>
    )
  }
}
  1. 父级组件App
/* ------------ 组件间的嵌套(App父级组件) ------------- */
import React, { Component } from 'react'

// 引入外部组件
import Naviber from './03-嵌套的外部组件/Naviber'
import Footer from './03-嵌套的外部组件/Footer'

export default class App extends Component {
  render() {
    return (
      <div>
        {/* 调用渲染外部组件 */}
        <Naviber/>
        <Footer/>
      </div>
    )
  }
}

  1. index.js(React入口文件)
/* --------------- react项目入口文件 ---------------- */

import React from 'react'//1.引入react
// import ReactDOM from 'react-dom'//2.引入react-dom //react17
import * as ReactDOM from 'react-dom/client'; // react18

import App from './01-base/03-组件间的嵌套' // 引入App父组件

// ReactDOM.render( // react17
//     <h1>欢迎进入React的世界</h1>,
//     // 渲染到哪里(函数式编程)
//     document.getElementById('root')
// )

// react 18
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);// 渲染我们自己定义的app组件(直接使用自闭合标签包裹组件名即可,切记组件名一定要大写)

结果展示:

image

4. 组件的样式

  • 行内样式:想给虚拟dom添加行内样式，需要使用表达式传入样式对象的方式来实现：
// 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号
<p style={{color:'red', fontSize:'14px'}}>Hello world</p>

  • 行内样式需要使用js写入一个样式对象，而这个样式对象的位置可以放在很多地方，例如render 函数里、组件原型上、外链js文件中

  • 外部样式直接引入使用即可

代码展示:

  • 组件中样式的使用
/* ------------ 组件间的样式 -------------- */

import React, { Component } from 'react'
import './css/myCss.css'//直接引入外部样式使用
export default class styleCss extends Component {
    render() {
        // 定义样式类名(classname)
        var blue = {
            color: 'blue'
        }
        return (
            <div>
                {/* 1. 行内样式(需要使用className来指定标签的选择器也就是html中的class选择器) */}
                <p style={blue}>蓝色</p>
                {/* 并且之前的css中多字样式需要使用驼峰命名法替代入:font-size -> fontSize */}
                <p style={{color:'red',fontSize:'20px'}}>红色</p>

                {/* 2. 引入外部样式 */}
                <p id="yellow">黄色</p>
                <p className='yellowgreen'>黄绿色</p>
            </div>
        )
    }
}

  • 外部的css样式文件
#yellow{
    color: yellow;
}

.yellowgreen{
    color: yellowgreen;
}
  • index.js
/* --------------- react项目入口文件 ---------------- */

import React from 'react'//1.引入react
// import ReactDOM from 'react-dom'//2.引入react-dom //react17
import * as ReactDOM from 'react-dom/client'; // react18

import App from './01-base/04-组件的样式' // 引入App父组件

// ReactDOM.render( // react17
//     <h1>欢迎进入React的世界</h1>,
//     // 渲染到哪里(函数式编程)
//     document.getElementById('root')
// )

// react 18
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);// 渲染我们自己定义的app组件(直接使用自闭合标签包裹组件名即可,切记组件名一定要大写)

结果展示:

image

小结

  • React推荐我们使用行内样式，因为React觉得每一个组件都是一个独立的整体，其实我们大多数情况下还是大量的在为元素添加类名，但是需要注意的是，class需要写成className（因为毕竟是在写类js代码，会收到js规则的现在，而class 是类关键字）