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 />