博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
React-组件的生命周期
阅读量:4648 次
发布时间:2019-06-09

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

1.组件的生命周期

组件的生命周期分成三个状态:

  • Mounting:已插入真实 DOM

  • Updating:正在被重新渲染

  • Unmounting:已移出真实 DOM

React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。

  • componentWillMount()---render之前最后一次修改状态的机会

  • componentDidMount()---成功render并渲染完成真实DOM之后触发,可以修改DOM

  • componentWillUpdate(object nextProps, object nextState)

  • componentDidUpdate(object prevProps, object prevState)

  • componentWillUnmount()

此外,React 还提供两种特殊状态的处理函数。

  • componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用

  • shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用

 注意:render只能访问this.props和this.state,只有一个顶层组件,不允许修改状态和DOM输出

 2.React中的Ajax使用

组件的数据来源,通常是通过 Ajax 请求从服务器获取,可以使用 componentDidMount 方法设置 Ajax 请求,等到请求成功,再用 this.setState 方法重新渲染 UI

	
测试获取数据

要获取的数据是:https://api.github.com/users/octocat/gists里面的JSON数据

效果:

  

上面代码使用 jQuery 完成 Ajax 请求,这是为了便于说明。React 本身没有任何依赖,完全可以不用jQuery,而使用其他库。

使用get()方法以GET方式从服务器获取数据

  使用get()方法时,采用GET方式向服务器请求数据,并通过方法中回调函数的参数返回请求的数据,它的调用格式如下:

  $.get(url,[callback])

  参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。

使用bind()方法绑定元素的事件

  bind()方法绑定元素的事件非常方便,绑定前,需要知道被绑定的元素名,绑定的事件名称,事件中执行的函数内容就可以,它的绑定格式如下:

  $(selector).bind(event,[data] function)

  绑定元素的多个事件时,只需将事件用空格符隔开

  $("#test").bind("change click",function(){});

  参数event为事件名称,多个事件名称用空格隔开,function为事件执行的函数。

总结: 

  (1)ReactJs是基于组件化的开发,所以最终你的页面应该是由若干个小组件组成的大组件。

  (2)可以通过属性,将值传递到组件内部,同理也可以通过属性将内部的结果传递到父级组件;要对某些值的变化做DOM操作的,要把这些值放到state中

  (3)为组件添加外部css样式时,类名应该写成className而不是class;添加内部样式时,应该是style={

{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。

  (4)组件名称首字母必须大写。

  (5)变量名用{}包裹,且不能加双引号。

参考文档:

http://www.ruanyifeng.com/blog/2015/03/react.html

http://www.cocoachina.com/webapp/20150721/12692.html

转载于:https://www.cnblogs.com/GumpYan/p/5809424.html

你可能感兴趣的文章
膨胀的木棍
查看>>
Python -- sys模块
查看>>
LOJ3119 CTS2019 随机立方体 概率、容斥、二项式反演
查看>>
[poj2234]Matces Game_博弈论
查看>>
play @Before 的使用
查看>>
2018.09.24 codeforces 1053C. Putting Boxes Together(线段树)
查看>>
取字符串以逗号隔开的两个值
查看>>
C#方法名前的方括号是干嘛用的呀?
查看>>
Android开发 GradientDrawable详解
查看>>
python基础七之copy
查看>>
[大数据可视化]-saiku的源码包Bulid常见问题和jar包
查看>>
计算机科学速成课18:操作系统
查看>>
钱去那儿了
查看>>
iis windows phpstudy安装redis扩展
查看>>
jquery学习之1.10-小练习-选中下拉框内容并显示
查看>>
Qt5.6.0+OpenGL 纹理贴图首战告捷
查看>>
Docker Compose 容器编排
查看>>
PS:切图
查看>>
Spring Boot学习笔记——Spring Boot与ActiveMQ的集成
查看>>
Set接口
查看>>