react 组件的构造函数

川长思鸟来 2021-07-26 20:12 455阅读 0赞

constructor 函数时组件最先执行的函数

class childen extends react.Component{
       constructor(props){
          super(props);
          this.state={
              attr1:"",
          }
      }
    }

一般在constructor函数中都会存在 上述方法，个人对其的理解

constructor()：子类继承父类时的构造方法，主要时用以定义this.属性 在react中一些默认的数据可以直接在此处定义

import React from 'react';
    
    class Mine extends React.Component {
        constructor(a) {
            super(a);
            this.state = {
                date: new Date().getTime()
            }
            //定义custom 和state并没有什么本质的区别，在都可以通过this都访问，但是推荐使用state 因为在react中 即使我们不定义this.state
            //this下仍会有一个默认的state属性，具体作用暂时没有发现，感兴趣的同学可以深入了解一下
            this.custom = {
                date: new Date().getTime()
            }
            console.log(a);
        }
    
        componentWillMount() {
            console.log("在渲染前调用",this)
        }
    
        render() {
            return (
                <div>
                    <div className='head'>
                        <span>{this.state.date}</span>
                        <span>{this.custom.date}</span>
                    </div>
                </div>
            )
        }
    }

spuer()： 注意在定义组件的时候可以没用constructor方法，一旦定义，就必须使用spuer方法，这不是react规定的而是es6要求，具体原因如下

![format_png][]

[format_png]: /images/20210726/ee5e85645f8645809a1bf878c68dd142.png

发表评论取消回复

表情：

评论列表（有 0 条评论，455人围观）

还没有评论，来说两句吧...

相关阅读

相关 React组件的生命周期函数

1、组件生命周期的三个阶段 1. Mounting（加载阶段） 2. Updating（更新阶段） 3. Unmounting（卸载阶段） 2、旧的生命周期

Dear 丶/ 2023年07月19日 15:27/ 0 赞/ 45 阅读

相关关于React组件生命周期函数的详解

1、生命周期的概念 1.1、概念在组件创建、组件属性更新、组件被销毁的过程中，总是伴随着各种各样的函数执行，这些在组件特定时期，被触发执行的函数，统称为组件的生命

红太狼/ 2023年07月11日 11:03/ 0 赞/ 130 阅读

相关 react组件通讯

React 的组件可以定义为 class 或函数的形式函数组件 <script type="text/babel"> function HelloM

Dear 丶/ 2023年01月13日 01:51/ 0 赞/ 239 阅读

相关 react组件通信

一、状态机setState是一个异步操作 setState用来修改state中的初始状态，但是它异步操作，不能在setState之后马上获取到最新的数据。可以使用setS

末蓝、/ 2022年12月05日 10:20/ 0 赞/ 206 阅读

相关 React组件API

虚拟DOM React之所以快，是因为它不直接操作DOM。React将DOM结构存储在内存中，然后同render()的返回内容进行比较，计算出需要改动的地方，最后才反映到

悠悠/ 2022年06月16日 13:09/ 0 赞/ 175 阅读

相关 React组件的生命周期

概述 React组件的生命周期就是React组件从创建到消亡的过程。大致分为三个阶段： 1.Mounting 组件装载和初始化 2.Updatin

ゝ一纸荒年。/ 2022年06月03日 04:07/ 0 赞/ 294 阅读

相关 React组件的生命周期

![70][] var Hello = React.createClass({ getInitialState:function(){

墨蓝/ 2022年05月21日 12:40/ 0 赞/ 262 阅读

相关 React组件继承的由来

没有显式继承的时候我们这么写: import as React from "react"; export interface HelloProps

迷南。/ 2021年12月15日 03:34/ 0 赞/ 229 阅读

相关 react组件的构造方法 constructor()

react组件的构造方法 constructor() constructor(props)\{ super(props); this.state = \{

浅浅的花香味﹌/ 2021年09月17日 15:30/ 0 赞/ 400 阅读

相关 react 组件的构造函数

constructor 函数时组件最先执行的函数 class childen extends react.Component{ constructor(

川长思鸟来/ 2021年07月26日 20:12/ 0 赞/ 456 阅读