博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
react学习笔记2
阅读量:6987 次
发布时间:2019-06-27

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

1.build文件介绍

(1)react.js  是react的核心库

(2)react-dom.js  提供与DOM相关功能

(3)browser.js  是将JSX语法转为javascript语法

 

2.组件的继续学习

  注意:组件的第一个字母必须大写,否则会报错。组件的用法和html标签完全一致,可以任意加入属性。组件的属性,可以通过 this.props 对象上获取。

 

3.this.props.children

  

  this.props.children 有三种可能 :

             a.当前组件没有字节点,返回undefined   ;

             b.如果有一个字节点,数据类型是object  ;

             c.数据类型是array

  

  (1)代码预览

  

  (2)游览器里效果

  

  (3)源码  

      
Hello React!

 

  

4.PropTypes

  组件类的 PropType 属性,就是用来验证组件实例的属性是否符合要求。

 

  (1)代码预览

  

 

  (2)游览器里效果

  

  (3)源码

  

      
Hello React!

 

 

 

5.获取真实的dom节点

  组件并不是真实的dom节点,而是存在于内存中的一种数据结构,叫做virtual dom。只有插入文档中才会变成真实的dom 。根据react的设计,所有的dom的变动,都现在虚拟的dom上发生,然后再将实际发生变动的部分,反映在真实的dom上,这种算法叫做dom diff,它可以极大提高网页的性能。

  (1)代码预览

  

  (2)游览器效果如下:

  

  (3)源码

  

      
Hello React!

 

 

 

6.this.state

  this.state 和 this.props 都是用来描述组件的特性。this.props 表示那些一旦定义,就不再改变的特性,而  this.state 是随着用户而产生的热性。

  

  (1)代码预览

  

  (2)游览器里效果(点击的时候会切换)

  

  

  (3)源码

                      

 

 

7.表单

  (1)代码预览

  

  (2)在游览器中的效果 (p标签里面的内容会随着input里面的内容变化)

  

  (3)源码

  

                      

 

 

8.组件的生命周期

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

    1. mounting : 已经插入真实dom

    2.updating :  正在被重新渲染

    3.unmounting : 已移除真实dom

  

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

    1. componentWillMount()

    2. componentDidMount()

    3. componentWillUpdate(object nextProps,object nextState)

    4. componentDidUpdate(object prevProps,object preState)

    5. componentWillUnmount()

 

  此外,react还提供特殊状态的处理函数:

    1.  componentWillReceiveProps(object nextProps) 已加载组件到新的参数时调用

    2.  shouldComponentUpdate(object next Props,object nextState) 组件判断是否重新渲染时调用

 

 

  例子:(helloworld的透明度随时间改变)

  (1)代码预览

  

  (2)游览器里的效果

  

  (3)源码

  

                      

 

 

 

9.ajax

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

  (1)代码预览

  

  (2)游览器效果

  

  

  (3)源码

  

                          

 

  

10.最后总结下几个需要注意的地方:

  1.react主要的概念是 状态机+组件

  2.组件的首字母必须大写

  3.组件使用的过程中/不要漏掉 ,<conponentName />

  

  

  

转载于:https://www.cnblogs.com/cynthia-wuqian/p/5207678.html

你可能感兴趣的文章
zabbix 监控 介绍
查看>>
SVN使用
查看>>
针对代码类测试的要点总结
查看>>
oracle 10g 启动 停止服务 批处理
查看>>
Docker部署私有仓库
查看>>
SQL Mirror配置手册
查看>>
linux bash bc awk 浮点 计算 比较
查看>>
基于socket.io的实时消息推送
查看>>
软件测试主要是做什么?
查看>>
7月第二周搜索引擎网站排名:百度谷歌搜搜前三
查看>>
查询进程并杀死
查看>>
VMXNET3 vs E1000E and E1000
查看>>
7200的GRE(隧道)+ipsec(传输模式+pre-share)配置
查看>>
四、编译安装php-5.5.34
查看>>
Thinkpad X240修改bios引导,U盘安装系统
查看>>
Slave SQL: Relay log read failure: Could not parse relay log event entry.
查看>>
抽取Zabbix的图形整合到自己后台
查看>>
lamp服务器站点目录被植入广告代码
查看>>
如何把海量数据从 Oracle 导入到 Mongodb
查看>>
rsync后台服务
查看>>