博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
react初始化阶段
阅读量:4322 次
发布时间:2019-06-06

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

  1. 初始化阶段可以使用的函数:
    getDefaultProps:只调用一次,实例之间共享引用。只有在组件的第一个实例被初始化的时候,才会调用他,然后react会把这个函数的返回结果保存起来,从第二个实例开始,他们的默认属性都是这同一个结果。实例之间共享引用,在js中有两种类型的数据,一种值类型,比如字符串,布尔值等,一种是引用类型,比如数组,对象等,如果函数返回的是引用类型的数据,那么react会把引用保存起来,在创建不同的实例的时候,他会使用同一个引用当做属性,但是我们知道,引用指向的都是同一个地址,所以说不同实例之间操作的其实是同一个数据,所以在用这个函数的时候,要注意返回的是引用还是值。
    getInitialState:初始化每个实例特有的状态。从这个函数开始,每个实例被初始化的时候,都会调用他, 不像第一个函数只会调用一次,第一个函数处理的是属性,第二个函数处理的是状态,由于状态是每个实例自己内部的信息,每个实例要维护自己状态,所以不同的实例有不同的状态,那么都需要调用这个函数。
    componentWillMount:render之前最后一次修改状态的机会。在这个时候,你还是可以修改状态的,但是在render里面就不可以在修改状态了。
    render:只能访问this.props和this.state,只有一个顶层组件,不允许修改状态和dom输出。this.props和this.state是render特有的两个数据源,除此以外,你不应该在获取其他的数据信息。只有一个顶层组件?render的返回值只能是一个组件,这个组件可以包含很多的子组件,也可以包含很多的子代码,但是本质上他还是一个组件,你不能返回一个数组。不允许修改状态和dom输出。如果一定要修改,也是可以的,但是react不推荐这么做,如果你修改了状态和输出的话,那么render函数就无法再服务端进行使用,当然我们大部分时候是在客户端使用的render函数,如果你想提高网站的加载性能,就可以在服务端进行处理,但是你的render函数需要修改状态和dom输出,在服务端得时候是没有这样的环境的,所以你如果修改了状态和输出,就只能在浏览器使用了,这回大大的限制你的系统性能。第二个原因就是你如果在render里面修改了状态和输出,会导致代码的逻辑变得非常的复杂,很难经过状态分析出结果,react设计目的之一就是让组件的逻辑变得清晰简单,这样就违背了这样的目的。你自己还是别人就很难看懂这段代码。
    componentDidMount:成功render并渲染完成真实dom之后触发,可以修改dom。这个函数被调用的时候,dom已经被创建。
  2. 实例:查看触发顺序。
        
    测试

    注意上面代码中红色的标记部分,我们只是输出的字符串HelloWorld,并不是标签<HelloWorld></Helloworld>,所以此时的控制台和输出是这样。

    我们可以看出,getDefaultProps在实际的使用中,是直接调用的,也就是在React.createClass之后,就会被调用并把结果存储起来,及时你没有生成实例,这个函数也会被调用,react这么做主要目的就是为了提高性能,尽可能早的将我们要做的事情处理好,这样当我们要使用HelloWorld实例的时候,就会省掉调用这个函数的时间从而提高性能。我们改一下代码,让其正确输出。
        
    测试

  3. 各个实例的正确用法
        
    测试

  4. 输出count,生成多个HelloWorld
        
    测试

转载于:https://www.cnblogs.com/shmilysong/p/6119340.html

你可能感兴趣的文章
Alpha 冲刺 (7/10)
查看>>
一款jQuery打造的具有多功能切换的幻灯片特效
查看>>
SNMP从入门到开发:进阶篇
查看>>
@ServletComponentScan ,@ComponentScan,@Configuration 解析
查看>>
unity3d 射弹基础案例代码分析
查看>>
thinksns 分页数据
查看>>
os模块
查看>>
LINQ to SQL vs. NHibernate
查看>>
基于Angular5和WebAPI的增删改查(一)
查看>>
windows 10 & Office 2016 安装
查看>>
最短路径(SP)问题相关算法与模板
查看>>
js算法之最常用的排序
查看>>
Python——交互式图形编程
查看>>
经典排序——希尔排序
查看>>
团队编程项目作业2-团队编程项目代码设计规范
查看>>
英特尔公司将停止910GL、915GL和915PL芯片组的生产
查看>>
Maven配置
查看>>
HttpServletRequest /HttpServletResponse
查看>>
SAM4E单片机之旅——24、使用DSP库求向量数量积
查看>>
从远程库克隆库
查看>>