博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
react 创建组件 (二)component
阅读量:7281 次
发布时间:2019-06-30

本文共 1144 字,大约阅读时间需要 3 分钟。

因为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 

Hello, {this.props.name}

; }}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 进行了绑定。

转载地址:http://cykjm.baihongyu.com/

你可能感兴趣的文章
渗透&&探测 ( ICMP 篇)
查看>>
容器监控实践—Prometheus的配置与服务发现
查看>>
dubbo源码解析(三十九)集群——merger
查看>>
PAT A1022
查看>>
捋一捋React的生命周期
查看>>
【跃迁之路】【731天】程序员高效学习方法论探索系列(实验阶段488-2019.2.21)...
查看>>
HTTP中Accept与Content-Type区别
查看>>
RunC容器逃逸漏洞席卷业界,网易云如何做到实力修复?
查看>>
PAT A1043
查看>>
SAP S/4HANA生产订单的BAdI增强点之Initialize方法
查看>>
css加载会造成阻塞吗
查看>>
天天都在使用CSS,那么CSS的原理是什么呢?
查看>>
可视化开发脚手架
查看>>
springboot jar 启动脚本
查看>>
现代JS中的流程控制:详解Callbacks 、Promises 、Async/Await
查看>>
如何在微软Azure上设置以太坊私有区块链
查看>>
Docker 文档(目录)
查看>>
你不知道的Virtual DOM(四):key的作用
查看>>
吴恩达机器学习笔记-神经网络的代价函数和反向传播算法
查看>>
前后端的分离模式
查看>>