React的学习(下)
来源:互联网 发布:js时间格式转化为数字 编辑:程序博客网 时间:2024/06/10 02:25
摘要
众所周知,前端三大框架Angular、React、Vue,所以为了跟上时代的步伐,最近开始着手学习React,这时候就发现个大问题,框架一直在更新,提倡的编写语法也在更新,网上有许多教程都是一两年前的了,因此,我决定直接从官方英文文档入手学习,学习的框架版本为最新的ReactV15.5.0,现将学习笔记整理如下,以供大家参考,本篇文章主要是react一些基础语法的讲解与总结,如需深入了解,可查阅官方文档,也敬请期待后续文章。
本文接着上篇文章继续讲解React的基础语法
5、表单
文本输入框的值,不能用 this.props.value 读取,而要定义一个 onChange 事件的回调函数,通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况,更多介绍请参考官方文档。
如果你希望React指定初始值,但不再控制后续更新。要处理这种情况,可以指定一个defaultValue属性而不是value。
<input type="checkbox">和<input type="radio">支持defaultChecked,<select>与<textarea>支持defaultValue。
6、组件生命周期
组件的生命周期分成三个状态:
- Mounting:已插入真实 DOM
- Updating:正在被重新渲染
- Unmounting:已移出真实 DOM
React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外,React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用
7、AJAX
React并没有像Angular一样一手包办,连http服务都帮我们封装好了,因为它提倡的是以React为核心,同时你可以使用其他的库,增加代码的灵活性,而不是一手包办,所以React是个轻量的库。
组件的数据来源,通常是通过 Ajax 请求从服务器获取,可以使用 componentDidMount 方法设置 Ajax 请求,等到请求成功,再用 this.setState 方法重新渲染 UI 。
8、样式的设置
1)设置class
因为class是ES6语法里的关键字,所以在React里使用class时,应该改为className,例如
<div className="style1"></div>
2)使用行内样式
style的值是对象,所以如下:
let backAndTextColor = { backgroundColor:'red', color:'white', fontSize:40 }; <div style={backAndTextColor}>看背景颜色和文字颜色</div> //或者,注意是双括号哦,第一层是{}是JSX语法,第二层{}代表是对象,是不是一目了然了<div style={{backgroundColor:'red',color:'white',fontSize:40}}>看背景颜色和文字颜色</div>
9、操作组件内节点
通过设置标签的ref属性,然后用this.refs[‘前面的ref名’]访问
可以拿到原生的节点后,这时就可以使用其他方法比如jQuery操作原生的节点【题外话:通过$()[0],可以从jQuery对象中拿到原生对象】
var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput.focus(); }, render: function() { return ( <div> <input type="text" ref="myTextInput" /> <input type="button" value="Focus the text input" onClick={this.handleClick} /> </div> ); }});ReactDOM.render( <MyComponent />, document.getElementById('example'));
上面代码中,组件 MyComponent 的子节点有一个文本输入框,用于获取用户的输入。这时就必须获取真实的 DOM 节点,虚拟 DOM 是拿不到用户输入的。为了做到这一点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。
通过这个ref我们同样可以获取input的输入值。就是这么简单。
但是使用过程中我们切记:由于 this.refs.[refName] 属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。上面代码中,通过为组件指定 Click 事件的回调函数,确保了只有等到真实 DOM 发生 Click 事件之后,才会读取 this.refs.[refName] 属性。
10、一个简单的demo
接下来展示一个简单的demo,实现网页时钟显示
class Timer extends React.Component{ constructor(props) { super(props); this.state = {h:0,m:0,s:0}; } tick(){ var now_date=new Date(); this.setState({ h:now_date.getHours(), m:now_date.getMinutes(), s:now_date.getSeconds() }); } componentDidMount(){ var _this=this; setInterval(function(){ _this.tick(); },1000); this.tick(); //组件刚挂载时执行tick(),可以避免出现0:0:0 } render(){ return ( <div> <span>{this.state.h}:</span> <span>{this.state.m}:</span> <span>{this.state.s}</span> </div> ); }}ReactDOM.render( <Timer />, document.getElementById('root'));
更多前端技术文章,欢迎访问我的个人技术博客:嵘么么的个人博客
- React的学习(下)
- React Native学习笔记(一)Mac OS X下React Native的环境搭建
- React的学习(上)
- React学习-- React源码(3)生命周期的管理艺术
- react-router的改变(下)
- React 学习(一)环境的搭建
- React学习的记录
- React的学习
- React学习(1)
- React 学习 (二)
- React学习之- (React-JSX-Style)
- React学习之-(React Components Lifecycle)
- React学习之-(React-Event-Listener)
- React学习 -- React源码(1)
- React学习-- React源码(6)React Patch方法
- React native Window 下的开发环境(android)
- react的学习笔记1
- 学习react遇到的问题
- matlab fir2函数的用法
- html和jsp区别
- 表情识别(emotion recognition)
- 剑指offer:从尾到头打印链表
- Android studio Day01-2&3
- React的学习(下)
- 腾讯课堂IMWeb小白学习作业2
- 2017腾讯移动端开发暑期实习生面试总结(倒在二面)
- SQL基本语句
- 基于 Django1.10 文档的深入学习(3)—— models.py 之 FileField
- 我对linux驱动 输入子系统的理解
- C++容器
- Problem E: One Stroke----暴力
- Android ListView与SQLite综合使用(水果商品展示案例)