React05-组件开发

萝莉爱裸奔
146 阅读5分钟

一、插件安装

组件有两种后缀名字。第一种是js结尾的文件，第二种jsx结尾的文件。习惯用jsx结尾。

image-20220415114041456

image-20220415114109192

后续我们用JSX结尾的文件，开发提示友好。

二、组件概念

react基于组件开发，单文件开发。组件开发将页面UI的内容拆分为一个一个的模块。

react组件分类两种类型：

  • 函数组件：组件内部用函数来定义（无状态组件）
  • 类组件：组件内部用类定义（有状态组件）

状态：组件内部的数据。

React设计的时候，提出了两种组件的开发方式，目前前端的开发方式，面向对象编程，函数式编程。

先学习类组件，后面再学习函数，两则可以再项目中混用。

三、组件分类

函数组件

代码结构:使用RFC快捷键创建函数组件的模板

import React from 'react'
export default function Student() {  
    const username = "xiaowang" 
    return (    <div>Student</div>  )
}

特点：

  1. 定义一个函数，最后将这个函数保留出去。函数里面return一个节点。
  2. 函数组件没有状态，目前你再函数组件里面定义的变量，渲染完成后如果发生数据变化，页面不会更新

类组件

类组件采用面向对象编程:创建类组件的快捷键RCC

import React, { Component } from 'react'
export default class Classes extends Component {  
    render() {  
        return (  <div>Classes</div>  )  
    }
 }

特点：

  1. 首先要定义一个类，集成Component这个组件。这个组件才能称为React类组件
  2. Component：React官方提供的一个组件，任何一个类集成这个Component，这个类变成组件
  3. 子组件如果要渲染完成节点，必须重写render方法，优先调用你们重写render方法
  4. 有状态的组件，类里面定义的数据，可以响应式变化

四、组件中的样式

组件的三大部分：

HTML模板：不管再类组件还是函数组件中，Jsx已经将js和模板结合。

JS：JSX的语法来完成

样式：内部样式，外部样式

内部样式

import React from "react"
class Teacher extends React.Component{ 
    render(){    
        return (     
            <div style={{color:"red",fontSize:"20px"}}>123</div>      
        )  
    }
}
export default Teacher

JSX 已经将所有的css样式都做了封装。

<div style={}>123</div>  //动态绑定属性

<div style={{color:"red"}}>123</div>  //动态绑定属性

给style传递了一个对象，对象封装就是css样式。

<div style={{color:"red",fontSize:"20px"}}>123</div>  //动态绑定属性

样式属性对应的结果，一定式字符串

外部样式

将样式文件定义到外部文件中，引入到这个组件内部

现在assets目录下面创建一个styles文件夹，common.css文件

设计样式代码

.box{    width: 100px;    height: 100px;    background-color: red;}

再组件中引入这个css样式

import React from "react"
import "../assets/styles/common.css"
class Teacher extends React.Component{  
    render(){    
        return (           
            <>          
                <div className="box"></div>     
            </>   
        )  
    }
}
export default Teacher

当你页面上某个元素className跟样式文件的class名字匹配。作用成功

五、组件中的图片

再传统网页中要使用图片

<img src="../images/1.jpg"/>

再react组件中使用图片

import wechat from "../assets/images/wechat.jpg"
export default class ImageLoad extends Component {
    render() {  
        return (     
            <div>      
                <img src={wechat} alt="" />  
            </div>  
        ) 
    }
}

import的方式引入图片，我们可以再组件模板里面动态加载

如图片在线地址，我们直接img里面填充这个地址

<img src="//m15.360buyimg.com/mobilecms/jfs/t1/189296/25/22157/194537/62398c02Ed8a20199/6f0720a392c5e4bc.jpg!cr_1125x449_0_166!q70.jpg" alt="" />

如果你只知道图片的地址，我们要动态加载

<img src={require("../assets/images/wechat.jpg")} alt="" />

如果只知道图片的路径，从本地获取图片，直接使用require来加载。

以前再react17这个版本里面

<img src={require("../assets/images/wechat.jpg").default} alt="" />

如果再css样式中要引入一张图片，如何办

<div style={{width:"100px",height:"100px",background:`url(${require("../assets/images/wechat.jpg")})`}}></div>

只要是再组件中使用图片，就两种方式。

import的方式，require的方式。包括背景图片也一样。

<div style={    {width:"100px",    height:"100px",    background:`url(${wechat})`}}></div>

六、组件中事件

我们需要给指定的节点绑定一些事件。

回顾再js中给一个元素绑定事件

<button onclick="check"></button>

Vue中绑定事件

<button @click="check"></button>

React中要给元素绑定事件，使用JSX，已经将所有的JS事件做了封装。再React所有的事件都是合成事件。

规则

React的事件和DOM事件很相似，但是又不一样

  1. React的事件采用小驼峰命名

     onclick---->onClick

  2. 再绑定事件函数定时候，你传递一个函数进入，而不是一个字符串

     onclick="show"---->onClick={this.check}

基础语法

export default class EventComp extends Component {    
    check() {      
        console.log(123);   
    }   
    render() {  
        return (  
            <div>     
                <button onClick={this.check}>点击触发</button>        
                <input type="text" onBlur={this.check} />    
            </div>    
        )   
    }
}

再绑定事件的时候，需要再括号中this的方式来找到指定的函数

关于this问题（重点）

绑定事件的时候，我们可以定义普通函数来作为事件函数

import React, { Component } from 'react'
export default class EventComp extends Component {  
    check() {    
        console.log(this);  
    }   
    render() {     
        return (   
            <div>        
                <button onClick={this.check}>点击触发</button>     
            </div>    
        )    
    }
}

check是一个普通函数，普通函数this，由调用者来决定。check里输出this默认指向button按钮，react对这种情况做了处理，直接处理undefined

如果我们再事件函数里面需要得到的this为当前这个组件对象

 <button onClick={this.check.bind(this)}>点击触发</button>

bind (this)==>这个this代表的当前整个组件。传递给check函数，相当于check函数内部的this默认变成整个组件，

check(){    this.show()}

采用箭头函数的方式来定义，可以解决this指向问题

import React, { Component } from 'react'
export default class EventComp extends Component { 
    show = ()=>{   
        console.log(this);   
    }  
    render() {    
        return (   
            <div>       
                <button onClick={this.show}>点击</button>    
            </div>    
        )  
    }
}

show是箭头函数，一开始就已经确定了this指向问题。show函数内部输出this默认一直指向EventComp

参数问题

再react中事件函数不能直接一来就调用

<button onClick={this.add(1,2)}>参数</button>

页面加载完毕后，add函数就立即执行。

<button onClick={()=>this.add(1,2)}>参数</button>

onClick对应绑定的是一个箭头函数，触发点击事件才会执行。箭头函数执行，里面add立即执行

avatar
文章
阅读
粉丝