通过继承React.Component创建React组件-5

在React中,V16版本之前有三种方式创建组件(createClass() 被删除了),之后只有两种方式创建组件。这两种方式的组件创建方式效果基本相同,但还是有一些区别,这两种方法在体如下:
在这里插入图片描述

本节先了解下用extnds React.Component 的方式创建React组件。

通过继承React.Component创建React组件

以下是一个简单的模板实现:

<script type="text/babel">//组件名称要用大写字母开头,因为React在渲染时会区分大小写。class Suggest extends React.Component { //自定义组件static defaultProps ={//定义组件参数默认值color: 'blue',text: 'Confirm',}; //state是一个属性,所以要写分号结尾constructor(props) { //定义构造函数,不需要写function关键字super(props); //必须要先调用父类的构造函数,否则无法使用this关键字this.state = { //定义state,一个属性,React组件的MVVM渲染就是造它来完成的//name: "korgs"}; }  //方法结尾没有逗号render() { //UI渲染方法return (<> {/*定义JSX最外层元素*/}<div> 我是显示内容 </div></>);}}const container = document.getElementById('app');const root = ReactDOM.createRoot(container);root.render(<Suggest text="我是参数值"/>); //组件调用
</script>

核心属性

props

props是properties的缩写。props是React用来让组件之间互相联系的一种机制,通俗地说就是方法的参数,组件的props一定来自于默认属性或通过父组件传递而来,在组件中通过this.props来获取。

 render() { //UI渲染return (<><div>{this.props.text}</div></>);}//调用示例,这个值会覆盖掉组件中static defaultProps定义默认的值root.render(<Suggest text="我是参数值"/>); 

props在React是单向数据流,值也是不可变的。当试图改变props的原始值时,React会报出类型错误的警告,一般可以通过复制的方法来操作:

var attribs = Object.assign({}, this.props); // 浅复制
const obj = {...this.state.obj, foo:'bar'};  //浅复制另一种写法(推荐)

propTypes

非必要实现,它会列出所有可传递给组件的参数列表,同时也提供了参数验证功能,但注意,它只会在控制台发出警告,并不会阻断程序运行,在V16之后已从React核心库中删除了,所以需要单独安装:
npm i --save-dev prop-types

import PropsTypes from "prop-types"class Suggest extends React.Component { //组件static defaultProps ={color: 'blue',text: 'Confirm',};
}Suggest.props = { //参数列表color: PropsTypes.string.isRequired,
}export default Suggest

以下是一些常见的用法:

Suggest.propTypes = {type: PropTypes.oneOf(['year', 'suggest', 'rating', 'text', 'input']),id: PropTypes.string,options: PropTypes.array,defaultValue: PropTypes.any,children: React.PropTypes.oneOfType([React.PropTypes.arrayOf(React.PropTypes.node),React.PropTypes.node,]),
};

ref

如果需要访问底层DOM节点来执行一些命令式操作时,可以使用ref属性,这个属性值一般要求全局唯一,有两个术语需要先分清:

  • 组件:指React组件;
  • DOM节点:指组件渲染后的html的Dom节点,通过组件可以拿到DOM节点;
class Focus extends React.Component {constructor(props) {super(props)this.handleClick = this.handleClick.bind(this)}handleClick() {this.element.focus()}render() {return (<div>{/*这里的ref是一个回调函数,组件加载时就会运行*/}<input type="text" ref={element => (this.element = element)} /><button onClick={this.handleClick}>Focus</button></div>)}
}

需要特别注意this.element = element中的element指向的组件,而非DOM节点元素,比如上面例子中 this.element = <input type="text" />,这样如果是个复杂组件,还可以访问组件内部的方法。

核心方法

render()

React在组件更新并非每次整个区域全部重新渲染,React会在内部维护一个称为Virual DOM的虚拟树,每次有DOM更新时就会维护此虚拟树结构,然后在需要UI重绘区域采用DOM DIFF算法计算出最小改变,然后选择最佳性能方法,比如append还是insert等方法重绘。

render() { //UI渲染return (<><div> 我是显示内容 </div></>);
}

render() 在实现上一般只返回组件,即使只是一段文本,也建议要用JSX的形式进行包装。

添加样式

内部样式

在组件内编写样式代码,React的style不能用字面量,需要封装成一个对象。然后需要用驼峰式代替原来的-连接符。

render() { //UI渲染const styleClass = {color:`red',background:`url({imgUrl})`,height:10 //默认是px};return (<><div style={styleClass}>css</div></>);
}

外部样式

正常使用时可以定义一个.css外部样式文件,然后在.js中引入。就可以正常使用了。

import './index.css'

使用classnames插件实现动态样式

npm i --save-dev classnames,这个插件主要用于当需要动态给组件添加样式,减少if语句数量用的,比如,下面代码就实现了按键颜色的切换。

import React from 'react'
import classnames from 'classnames';
import "./all.css"class ClassNameDemo extends React.Component {constructor(props) {super(props);this.state ={isPressed: false,};this.handleClick = this.handleClick.bind(this);}handleClick() {this.setState({isPressed: true})}render() {//使用方式const btnClass = classnames({'btn':true,'btn-pressed': this.state.isPressed,})return (<div><input type="text"/><button className={btnClass} onClick={this.handleClick}>Focus</button></div>)}}export default ClassNameDemo

all.css文件容

.btn{}
.btn-pressed{color: #f3f;
}

事件交互

React把所有事件绑定到结构的最外层,使用一个统一的事件监听器来处理(事件委派机制)。

React基于Virtual DOM实现了一个SyntheticEvent(合成事件层),所有自定义的事件都会接收到一个兼容的SyntheticEvent对象实例,它与原生的Event完全兼容,同样也可以使用stopPropagation()preventDefault()来中断。

如果需要使用原生Event,可以调用SyntheticEvent.nativeEvent属性。

绑定事件

  • 构造器内绑定:这种不能传递参数,好处是性能好,只bind一次即可**(推荐)**
 class Suggest extends React.Component {static defaultProps ={  };constructor(props) {super(props);//绑定this到事件中,以实现在自定义事件中的this指向组件,而非事件this.handleClick = this.handleClick.bind(this);}handleClick(e){/*一般在此处会调用this.setState({})方法重绘UI界面有时为了防止冒泡,会调用 e.preventDefault() 方法*/console.log(e.target); //target = <button>Click me!!!</button>}render() { //UI渲染return (<><button onClick={this.handleClick}>Click me!!!</button></>);}}
  • 自动绑定:这种可以传递参数,但每次渲染都要重新绑定一次
<script type="text/babel">class App extends React.Component {constructor(props) {super(props);this.state = {inputVal: 'male',};}handleInputChange(args, e) {console.log(e);console.log(args);}render() {const { inputVal} = this.state;return (<div><input type="radio" value="male" checked={inputVal === 'male'} onClick= {this.handleInputChange.bind(this,"dd")}/></div>);}}const container = document.getElementById('app');const root = ReactDOM.createRoot(container);root.render(<App text="我是参数值"/>);
</script>

原生事件

一些特殊的事件React并没有实现,所以在必要时还会需要使用js的原生的事件机制,通过ref定义通过refs取得组件DOM,然后在组件加载后绑定原生的侦听事件,代码如下:

  class Suggest extends React.Component { static defaultProps ={  };constructor(props) {super(props); this.handListener = this.handListener.bind(this);}componentDidMount(){//refs在新版本中已经不建议再用了,而且本身也不建议再使用了this.refs.buttonDom.addEventListener('click', this.handListener);}handListener(e){console.log(e.target);}render() { //UI渲染return (<><button ref="buttonDom">Click buttonDom!!!</button></>);}}

事件处理技巧

主要是为了防止绑定的事件太多,在一个地方绑定,然后用swith来分发,示例如下:

class Button extends React.Component {constructor(props) {super(props)this.handleEvent = this.handleEvent.bind(this) //绑定一个事件}handleEvent(event) {switch (event.type) { //根据事件类型分发事件case 'click':console.log('clicked')breakcase 'dblclick':console.log('double clicked')breakdefault:console.log('unhandled', event.type)}}render() {return (<button onClick={this.handleEvent} onDoubleClick={this.handleEvent}>Click me!</button>)}
}

远程获取数据

从远程URL获取数据,下例展示了一个从远程获取组件state初始化数据的过程。

 componentDidMount() {const _this = this; //指向组件 this,否则在fetch函数中无法引用组件fetch('https://api.github.com/users/grearon/gists', {method: 'POST',mode: 'no-cors',headers: {'Content-Type': 'application/x-www-form-urlencoded'},// body: JSON.stringify(response)}).then(function(response) {_this.setState({response}); //重置state}).catch( error => console.log(error));}

导出和导入

可以直接写成下面这样的代码,因为我们的宗旨是构建小而美的组件,所以下列的代码完全合理:

//Gallery.js
export default function Gallery(){ }
export function Profile(){ }
语法导出语句导入语句
默认export default function Button() {}import Button from ‘./Button.js’;
具名export function Button() {}import { Button } from ‘./Button.js’;
  • 最后的.js可以省略
  • 同一文件中,有且仅有一个默认导出,但可以有多个具名导出!

组件调用

添加子元素

除了像下面代码这样调用组件:

   const container = document.getElementById('app');const root = ReactDOM.createRoot(container);root.render(<Suggest text="我是参数值"/>); //组件调用

还可以在调用时传入子组件,比如组件这样来定义:

return (<><div style={styleClass}>{this.props.children}</div></>
);

调用

const container = document.getElementById('app');
const root = ReactDOM.createRoot(container);
root.render(<Suggest text="我是参数值"><div>ddd</div></Suggest>
);

注意看上例中{this.props.children}这个声明,它表示组件调用时可传递任意数量的子节点到组件中,上例中与<div>ddd</div>对应。

组件间通信

主要就是用到了props和state功能,希望两个组件的状态始终同步更改。要实现这一点,可以将相关 state 从这两个组件上移除,并把 state 放到它们的公共父级,再通过 props 将 state 传递给这两个组件。

父向子

父向子通过this.props属性,注意看下面的代码实现

<script type="text/babel">//子组件,定义了一个名为name的属性class Child extends React.Component{static defaultProps = {name:"button"}render(){console.log(this.props);return (<button>{this.props.name}</button>);}}//父组件class App extends React.Component{constructor(props){super(props);}render(){return (<>{/* 采用props传值给子组件,这时子组件其实会有两个属性值 */}<Child {...this.props}/> </>);}}const container = document.getElementById('app');const root = ReactDOM.createRoot(container);root.render(<App name="我是参数值" color="red"/>);
</script>

子向父

子组件控制父组件主要是通过回调函数实现,在父组件中定义回调方法,在子组件中注册事件,然后父组件把回调方法以参数的方式传递给子组件。

<script type="text/babel">class Child extends React.Component{static defaultProps = {name:"button",}render(){return (<button onClick={this.props.btnClick}>{this.props.name}</button>);}}//父组件class App extends React.Component{constructor(props){super(props);//定义一个数据,供子组件来修改this.state={count:0}this.handleClick = this.handleClick.bind(this);}//定义回调函数handleClick(e) {this.setState({count: this.state.count+1})console.log(e.target + this.state.count); //~~out: <button>我是参数值</button>0}render() {return (<>  {/*回调函数以参数的形式传给子组件*/}<Child btnClick={this.handleClick} {...this.props}/></>);}}const container = document.getElementById('app');const root = ReactDOM.createRoot(container);root.render(<App name="我是参数值" color="red"/>);
</script>

同级间

一般会采用公有父组件的方式,说白了就是向上组装,由父组件统一控制state数据,以实现数据共享的目的,或是再向上包装或封装成一个单独的类对象。

<script type="text/babel">//子组件,定义了一个名为name的属性class Child extends React.Component{static defaultProps = {name:"button",}render(){return (<button onClick={this.props.btnClick}>{this.props.name}</button>);}}//子组件Displayconst Display = ({counter}) => {return <h1>{counter}</h1>}//父组件class App extends React.Component{constructor(props){super(props);//定义一个数据,供子组件来修改this.state={count:0}this.handleClick = this.handleClick.bind(this);}handleClick(e) {this.setState({count: this.state.count+1})console.log(e.target + this.state.count);}render() {return (<><Child btnClick={this.handleClick} {...this.props}/><Display counter={this.state.count}/>{/*共享state数据*/}</>);}}const container = document.getElementById('app');const root = ReactDOM.createRoot(container);root.render(<App name="我是参数值" color="red"/>);
</script>

-------- 以上组件的基本用法全介绍完了,下面是一个常用的实例---------

例子:处理表单数据

表单封装

<script type="text/babel">class UserForm extends React.Component {constructor(props) {super(props);this.state = {userName:"",userAge:0,};this.handleSubmit = this.handleSubmit.bind(this);this.handleContentChange = this.handleContentChange.bind(this);}handleSubmit(event){console.log("提交操作");console.log(this.state);}/*注意这种绑定方法的实现*/handleContentChange(event){//用这种方法可减少change函数的个数this.setState({[event.target.name]: event.target.value,})}render() {const {color, text} = this.props;return (<><form onSubmit={this.handleSubmit}>{/*注意这种绑定方法*/}<label>用户名:</label><input name="userName" type="text"  value={this.state.name} onChange={this.handleContentChange}/><button  className={`btn btn-${color}`} >提交</button></form></>);}}const container = document.getElementById('app');const root = ReactDOM.createRoot(container);root.render(<UserForm />);
</script>

使用schema插件自动创建表单

下面的例子只是列出了如何格式化表单,至于jsonschema的详细用法可查看其官网,https://react-jsonschema-form.readthedocs.io/en/v1.8.1/。
安装 npm install --save react-jsonschema-form

class JSONSchemaForm extends React.Component {constructor() {super();this.handleSubmit = this.handleSubmit.bind(this);}handleSubmit = (values) => {console.log(values);}render() {//构建form表单const schemaForm = {type:"object",properties: {firstName: {type:"string", default:"Dan"},lastName: {type:"string", default:"Abramov"},}}return (<Form schema={schemaForm} onSubmit={this.handleSubmit}><button type="submit">Sub2mit</button></Form>)}
}

例子:组件优化

剥离操作和展现

就是把UI定义成一个方法、变量、参数或是单独组件,举例如下:

const ui = [<><div> 我是显示内容 </div><div className="Suggest" ref="div01">{this.props.text}</div><div style={styleClass}>css</div></>
]return (ui
);

展开属性…的用法

...用法其实就是一种语法糖,比如:

render() { //UI渲染const attr = {href:"www.baidu.com",alt:"_blank"}return (<>  {/* 这种写法其实就是herf={attr.href} alt={attr.alt}*/}<a {...attr}>click</a></>);
}

删除属性

 // 浅复制
var attribs = Object.assign({}, this.props);
//这段代码等价于: delete attribs.size; 
var {size, ...attribs} = this.props;

Immutable不可变数据集

这个库定义了多个类型工具类,如List, Stack, Map等,其主要是为了函数编程使用
cnpm insatll --save-dev immutable

import {List} from 'immutable';
//因为immutable中的对象和原生js比较相像,所以尽量用命名区分开,以免混淆
let $$list = List([1, 2]);
$$list.push(3, 4);let $$map = Immutable.Map({a:1, b:2, c:3})

Pure-render处理shouldComponentUpdate

这一节内容可以和Immutable不可变数据集一同应用,因为state变化会自动render(),所以在操作state前最好使用Immutable把一些数据变成不可变的,由人为来判断是否需要改变数据。

也就是在某此时刻最好把state看成是一个不可变对象。
cnpm i --save-dev react-addons-pure-render-mixin

import PureRenderMixin from 'react-addons-pure-render-mixin'class App extends  React.Component{constructor(props) {super(props);//一个浅复制的应现,代替原来的should实现this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);}render(){return <div>aaa</div>}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/15627.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java | Leetcode Java题解之第112题路径总和

题目&#xff1a; 题解&#xff1a; class Solution {public boolean hasPathSum(TreeNode root, int sum) {if (root null) {return false;}if (root.left null && root.right null) {return sum root.val;}return hasPathSum(root.left, sum - root.val) || has…

国内快速下载hugging face大模型的方法

由于众所周知的原因&#xff0c;从hugging face下载大模型比较困难&#xff0c;幸好国内有人做了镜像站&#xff0c;可以通过国内的镜像站进行快速下载&#xff0c;以下是配置方法。 我的系统是ubuntu 22&#xff0c;这里记录的方法只对debian/ubuntu有效。 git-lfs/INSTALLI…

信息系统项目管理师0130:工具与技术(8项目整合管理—8.7监控项目工作—8.7.2工具与技术)

点击查看专栏目录 文章目录 8.7.2 工具与技术8.7.2 工具与技术 专家判断监控项目工作过程中,应征求具备如下领域相关专业知识或接受过相关培训的个人或小组的意见,涉及的领域包括:挣值分析;数据的解释和情境化;持续时间和成本的估算技术;趋势分析;关于项目所在的行业以及…

【LSTM】LSTM cell的门结构学习笔记

文章目录 1. LSTM cell2. 门结构3. 门的公式4. 门的参数5. 重点关系厘清 1. LSTM cell 如文章 LSTM网络与参数学习笔记 中介绍, LSTM cell指的是一个包含隐藏层所有神经元的结构.但是LSTM门控单元的公式如何理解、门和LSTM cell神经元如何对应、门函数的参数维度、不同时间步不…

鸿蒙 DevEco Studio 3.1 Release 下载sdk报错的解决办法

鸿蒙 解决下载SDK报错的解决方法 最近在学习鸿蒙开发&#xff0c;以后也会记录一些关于鸿蒙相关的问题和解决方法&#xff0c;希望能帮助到大家。 总的来说一般有下面这样的报错 报错一&#xff1a; Components to install: - ArkTS 3.2.12.5 - System-image-phone 3.1.0.3…

leecode 1206|跳表的设计

跳表 跳表&#xff0c;一种链表数据结构&#xff0c;其增删改茶的效率能和平衡树相媲美 leecode1206 可以看上面的那个动画&#xff0c;动画效果很贴切。 我简单讲讲它的机制吧&#xff0c;每个节点不单单是一个&#xff0c;测试好几层&#xff0c;然后同一层的节点和统一节点…

Tomcat部署项目的方式

目录 1、Tomcat发布项目的方式 方式1&#xff1a; 直接把项目发布到webapps目录下 方式2&#xff1a;项目发布到ROOT目录 方式3&#xff1a;虚拟路径方式发布项目 方式4&#xff1a;(推荐)虚拟路径&#xff0c;另外的方式&#xff01; 方式5&#xff1a;发布多个网站 1、…

掩码生成蒸馏——知识蒸馏

摘要 https://arxiv.org/pdf/2205.01529 知识蒸馏已成功应用于各种任务。当前的蒸馏算法通常通过模仿教师的输出来提高学生的性能。本文表明&#xff0c;教师还可以通过指导学生的特征恢复来提高学生的表示能力。从这一观点出发&#xff0c;我们提出了掩码生成蒸馏&#xff08…

【字典树(前缀树) 异或 离线查询】1707. 与数组中元素的最大异或值

本文涉及知识点 字典树&#xff08;前缀树&#xff09; 位运算 异或 离线查询 LeetCode1707. 与数组中元素的最大异或值 给你一个由非负整数组成的数组 nums 。另有一个查询数组 queries &#xff0c;其中 queries[i] [xi, mi] 。 第 i 个查询的答案是 xi 和任何 nums 数组…

C++ | Leetcode C++题解之第97题交错字符串

题目&#xff1a; 题解&#xff1a; class Solution { public:bool isInterleave(string s1, string s2, string s3) {auto f vector <int> (s2.size() 1, false);int n s1.size(), m s2.size(), t s3.size();if (n m ! t) {return false;}f[0] true;for (int i …

264 基于matlab的自适应语音盲分离

基于matlab的自适应语音盲分离&#xff0c;当a和b同时对着传声器A,B说话且传声器靠得很近时&#xff0c;传声器A,B会同时接受到a和b的声音&#xff0c;即a和b产生了混叠干扰&#xff0c;此时通过自适应语音盲分离系统可以将a,b的声音分离开&#xff0c;使得一个信道只有一个人的…

2024.05.25学习记录

1、面经复习&#xff1a; JS异步进阶、vue-react-diff、vue-router模式、requestldleCallback、React Fiber 2、代码随想录刷题、动态规划 3、组件库使用storybook

python抽取pdf中的参考文献

想将一份 pdf 论文中的所有参考文献都提取出来&#xff0c;去掉不必要的换行&#xff0c;放入一个 text 文件&#xff0c;方便复制。其引用是 ieee 格式的&#xff0c;形如&#xff1a; 想要只在引用序号&#xff08;如 [3]&#xff09;前换行&#xff0c;其它换行都去掉&…

VTK 数据处理:特征边提取

VTK 数据处理&#xff1a;特征边提取 VTK 数据处理&#xff1a;特征边提取原理实例 1&#xff1a;边界边提取实例 2&#xff1a;模型特征边提取实例 3&#xff1a;利用 vtkFeatureEdges 提取的边界补洞实例 4&#xff1a;利用 vtkFillHolesFilter 补洞 VTK 数据处理&#xff1a…

OC属性关键字和单例模式

OC的属性关键字和单例模式 文章目录 OC的属性关键字和单例模式单例模式基本创建重写allocWithZone方法的同时使用dispatch_once 属性和属性关键字property和synthesize&#xff0c;dynamic属性关键字atomic和nonatomicstrong和weakreadonly和readwritestrong和copy 单例模式 单…

MySQL--存储引擎

一、存储引擎介绍 1.介绍 存储引擎相当于Linux的文件系统&#xff0c;以插件的模式存在&#xff0c;是作用在表的一种属性 2.MySQL中的存储引擎类型 InnoDB、MyISAM、CSV、Memory 3.InnoDB核心特性的介绍 聚簇索引、事务、MVCC多版本并发控制、行级锁、外键、AHI、主从复制特…

Python | Leetcode Python题解之第112题路径总和

题目&#xff1a; 题解&#xff1a; class Solution:def hasPathSum(self, root: TreeNode, sum: int) -> bool:if not root:return Falseif not root.left and not root.right:return sum root.valreturn self.hasPathSum(root.left, sum - root.val) or self.hasPathSum…

关于在子线程中获取不到HttpServletRequest对象的问题

这篇文章主要分享一下项目里遇到的获取request对象为null的问题&#xff0c;具体是在登录的时候触发的邮箱提醒&#xff0c;获取客户端ip地址&#xff0c;然后通过ip地址定位获取定位信息&#xff0c;从而提示账号在哪里登录。 但是登录却发现获取request对象的时候报错了。 具…

Docker提示某网络不存在如何解决,添加完网络之后如何删除?

Docker提示某网络不存在如何解决&#xff1f; 创建 Docker 网络 假设现在需要创建一个名为my-mysql-network的网络 docker network create my-mysql-network运行容器 创建网络之后&#xff0c;再运行 mysqld_exporter 容器。完整命令如下&#xff1a; docker run -d -p 9104…