首页 > 其他分享 >基础篇——组件

基础篇——组件

时间:2022-10-19 11:02:15浏览次数:78  
标签:基础 React state PropTypes User props 组件

二,组件

1,组件有两种定义方式:class(类组件)和使用函数(函数组件)

class:

  • 继承自React.Component
  • 内部必须定义render方法,返回该组件UI的React元素

使用函数:

  接收props作为参数,返回代表这个组件UI的React元素结构,

  例如:

function Welcome(props) {
        return <h1>hello,{props.name}</h1>;
}

 

2,props和state

例如做一个展示用户的列表,通过点击按钮给用户点赞:

props:

  用于把父组件中的数据或方法传递给子组件。props是只读的,不能在组件内部修改props。

在父组件中引用子组件User:<User name='sxww' age='26' /> ,此时User的props为props={name: 'sxww',age: '26'},User中使用props:

import React, { Component } from "react";
class User extends Component {
    constructor(props){
        super(props);//实际上调用了React.Component这个class的constructor方法,用来完成React组件的初始化工作
    }
    render() {
        const props = this.props;
        return (
            <div>
         <div><label>姓名:</label><span>props?.name</span></div>
         <div><label>年龄:</label><span>props?.age</span></div>
            </div>
        )
    }
}
export default User;   

state:

  组件的state是组件内部的状态,在constructor中通过this.state定义组件的初始状态,通过调用this.setState方法改变组件状态。

import React, { Component } from "react"; class User extends Component {     constructor(props) {         super(props);         this.state = { count: 0 }     }     handleClick() { let count = this.state.count; count++; this.setState({ count: count }) }     render() {         const props = this.props;         return (             <div>                 <button onClick={() => { this.handleClick(); }}></button>                 <span>{this.state.count}</span>             </div>         )     } } export default User;

react组件可以看做是一个函数,函数的输入是props和state,输出是组件的UI

UI = Component(props,state)

3,有状态组件和无状态组件

如果一个组件内部状态是不变的,则不用state,这样的组件称为无状态组件

一个组件内部状态会发生变化,则需要使用state,这样的组件称为有状态组件

定义无状态组件应该尽量将其定义为无状态组件。无状态组件不要关心状态的变化,只聚焦于UI的展示。这样,上述代码中获取用户信息,姓名、年龄、点赞数都放在父组件(有状态组件),handleClick也放到父组件,User只展示用户信息。

React应用组件设计的一般思路是,通过定义少数的有状态组件管理整个应用的状态变化,并且将状态通过props传递给其余的无状态组件,由无状态组件完成页面绝大部分UI的渲染工作。总之,有状态组件主要关注处理状态变化的业务逻辑,无状态组件主要关注组件UI的渲染。

4,属性校验和默认属性

 

 

 组件内部声明props应该暴露出那些接口,React提供了ProTypes这个对象,用于校验组件属性的类型

import PropTypes from 'prop-types';
class User extends React.Component{
    
}
User.propTypes = {
 info:PropTypes.object,
handleClick:PropTypes.func }

当使用PropTypes.object或PropTypes.array校验属性时,无法校验对象的结构和数组元素的类型,这种情况下,我们可以使用PropTypes.shape或PropTypes.arrayOf。如果属性是组件的必须属性,则需要在PropTypes的类型属性上调用isRequired。

User.propTypes = {
 info:PropTypes.shape({
  name: PropTypes.string,
age: PropTypes.number
}).isRequired, handleClick:PropTypes.func.isRequired,
photos: PropTypes.arrayOf(PropTypes.string),
}

React还提供了为组件属性指定默认值的特性,这个特性通过defaultProps实现,当组件属性未被赋值,组件会使用defaultProps的默认属性:

User.defaultProps = {
 info:{
  name: 'sxww', age: 26 } }

5,组件样式

为组件添加样式的方法有两种:外部CSS样式表和内联样式。

外部CSS样式表:和平时开发web应用时使用外部css文件相同,唯一区别在react元素使用className来代替class作为选择器。

function Welcome(props) {
        return <h1 className="foo">hello,{props.name}</h1>;
}
//css样式表
.foo{...}

class名称冲突的解决方案:可以使用CSS Modules,CSS Modules会对样式文件中的class名称重新命名从而保证其唯一性。(https://github.com/css-modules/css-modules)

内联样式:css in js,样式的属性名必须使用驼峰命名法。

function Welcome(props) {
        return <h1 style={{height:'50px',fontSize:'14px'}}>hello,{props.name}</h1>;
}

6,组件和元素

React组件是由若干React元素组建而成的。一个React组件是一个class或函数,接收一些属性作为输入,返回一个React元素。

 

标签:基础,React,state,PropTypes,User,props,组件
From: https://www.cnblogs.com/sxww-zyt/p/16801778.html

相关文章

  • 基础组件(一)
    1.TextInput允许用户输入文本的基础组件.属性onChangeText 接受一个函数,而此函数会在文本变化时被调用。onSubmitEditing 在文本被提交后(用户按下软键盘上的提交键)调用 ......
  • 【高等数学基础进阶】微分中值定理及导数应用
    一、微分中值定理定理1(费马引理):如果函数$f(x)$在$x_{0}$处可导,且在$x_{0}$处取得极值,那么$f'(x_{0})=0$ 定理2(罗尔定理):若$f(x)$在$[a,b]$上连续$f(x)$在$(a,b)$......
  • #打卡不停更# HarmonyOS - 基于ArkUI(JS)实现虚拟摇杆组件
    作者:杨尚晓前言虚拟摇杆在移动端游戏中是最常见看的,用来实现游戏中的精灵移动。本案例中使用jspai中的div和image组件来实现的虚拟摇杆组件,然后监听touch事件获取滑动的方......
  • 从0搭建vue3组件库:Shake抖动组件
    先看下效果其实就是个抖动效果组件,实现起来也非常简单。之所以做这样一个组件是为了后面写Form表单的时候会用到它做一个规则校验,比如下面一个简单的登录页面,当点击登录......
  • vue组件通信6种方式总结(常问知识点)
    前言在Vue组件库开发过程中,Vue组件之间的通信一直是一个重要的话题,虽然官方推出的Vuex状态管理方案可以很好的解决组件之间的通信问题,但是在组件库内部使用Vuex往往会......
  • React:Props属性(父组件传值子组件)
    React的一大特点是单向数据流。React中的每一个组件,都包含有一个属性(props),属性主要是从父组件传递给子组件的,在组件内部,我们可以通过this.props获取属性对象。1、定义和......
  • el-upload多文件上传组件封装
    文件多次上传,保留进度条<template><divclass="upload-file"><el-upload:action="uploadFileUrl":on-success="handleUploadSuccess"......
  • 数据结构基础—串
    数据结构基础—串一、串类型定义1.串的定义和相关概念字符串一般简称为串,其实就是由零个或多个字符组成的有限序列。逻辑结构和线性表极为相似,只是串的数据类型为字符型......
  • 使用vitepress构建组件库文档
    vitepress-demoblock  为vitepress添加更专业的Demo演示能力,让您在开发vue组件库或者vue相关文档编写时,可以通过引入vue文件的时候结果显示和代码演示。文档官方文......
  • vue中页面调用多次组件,会出现组件之间相互影响
    这个大部分发生在echarts和地图中,我们为了节省性能把echarts和map对象没有绑定在vue对象上导致,一个页面多次调用时会出现问题,解决办法:如果确定一个页面调用多次了,就把echa......