react 创建组件 (二)component
2023-09-11 14:15:30 时间
因为ES6对类和继承有语法级别的支持,所以用ES6创建组件的方式更加优雅,下面是示例:
import React from 'react'; class Greeting extends React.Component { constructor(props) { super(props); this.state = {count: props.initialCount}; this.handleClick = this.handleClick.bind(this); } //static defaultProps = { // name: 'Mary' //定义defaultprops的另一种方式 //} //static propTypes = { //name: React.PropTypes.string //} handleClick() { //点击事件的处理函数 } render() { return <h1>Hello, {this.props.name}</h1>; } } Greeting.propTypes = { name: React.PropTypes.string }; Greeting.defaultProps = { name: 'Mary' }; export default Greating;
可以看到Greeting继承自React.component,在构造函数中,通过super()来调用父类的构造函数,同时我们看到组件的state是通过在构造函数中对this.state进行赋值实现,而组件的props是在类Greeting上创建的属性,如果你对类的属性
和对象的属性
的区别有所了解的话,大概能理解为什么会这么做。对于组件来说,组件的props是父组件通过调用子组件向子组件传递的,子组件内部不应该对props进行修改,它更像是所有子组件实例共享的状态,不会因为子组件内部操作而改变,因此将props定义为类Greeting的属性更为合理,而在面向对象的语法中类的属性通常被称作静态(static)属性,这也是为什么props还可以像上面注释掉的方式来定义。对于Greeting类的一个实例对象的state,它是组件对象内部维持的状态,通过用户操作会修改这些状态,每个实例的state也可能不同,彼此间不互相影响,因此通过this.state来设置。
用这种方式创建组件时,React并没有对内部的函数,进行this绑定,所以如果你想让函数在回调中保持正确的this,就要手动对需要的函数进行this绑定,如上面的handleClick,在构造函数中对this 进行了绑定。
相关文章
- 【原创】开源.NET排列组合组件KwCombinatorics使用(一)—组合生成
- SQLServer安装时哪些功能是必需的(sql server 2016安装时选择哪些功能 必须安装的功能组件 必选的功能组件 轻便精简安装选项)
- jQuery.imgLazyLoad图片懒加载组件
- React 函数组件传递ref
- [React Intl] Format Date and Time Using react-intl FormattedDate and FormattedTime
- [React] Create an Auto Resizing Virtualized List with react-virtualized
- 利用 Jest 测试 React 组件
- SAP UI5 web Component的React组件,如何实现事件响应
- atitit. web组件化原理与设计
- 小程序在父组件执行子组件方法,可适用于下拉刷新上拉加载之后执行子组件方法
- react.js父子组件通信
- Django之REST_framework 框架基本组件使用
- 301-React Ext-React创建组件的三种方式及其区别
- 5.7.2 jmeter组件-前置处理器-BeanShell preprocessor
- Kubernetes集群架构原理及各节点组件概念(一)
- React组件之间如何通信?
- 【微服务笔记17】微服务组件之Gateway实现动态路由、配置路由规则、路由过滤器
- Flutter AspectRatio、Card 卡片组件、Flutter页面布局 Wrap 组件
- 【taro react】---- 编译微信小程序后报错:Error: Minified React error #321;