React 入门学习笔记2

摘自阮一峰:React入门实例教程,转载请注明出处。

 

一、获取真实的DOM节点

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

  但是,有时需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性。

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 节点。

  需要注意的是,由于 this.refs.[refName] 属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。上面代码中,通过为组件指定 Click 事件的回调函数,确保了只有等到真实 DOM 发生 Click 事件之后,才会读取 this.refs.[refName] 属性。

  React 组件支持很多事件,除了 Click 事件以外,还有 KeyDown 、Copy、Scroll 等,完整的事件清单请查看官方文档。

 

二、this.state 组件状态

  组件免不了要与用户互动,React的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI。

var LikeButton = React.createClass({getInitialState: function() { //定义初始状态,也就是一个对象return {liked: false};},handleClick: function(event) {this.setState({liked: !this.state.liked}); //通过this.state属性读取定义的状态//每次修改以后,自动调用 this.render 方法,再次渲染组件},render: function() {var text = this.state.liked ? 'like' : 'haven\'t liked';return (<p onClick={this.handleClick}>You {text} this. Click to toggle.</p>);}
});ReactDOM.render(
<LikeButton />,document.getElementById('example') );

  上面代码是一个 LikeButton 组件,它的 getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。

  由于 this.props 和 this.state 都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性。

 

三、表单

  用户在表单填入的内容,属于用户跟组件的互动,所以不能用 this.props 读取。

var Input = React.createClass({getInitialState: function() {return {value: 'Hello!'};},handleChange: function(event) {this.setState({value: event.target.value});},render: function () {var value = this.state.value;return (<div><input type="text" value={value} onChange={this.handleChange} /><p>{value}</p></div>);}
});ReactDOM.render(<Input/>, document.body);

  上面代码中,文本输入框的值,不能用 this.props.value 读取,而要定义一个 onChange 事件的回调函数,通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况.

 

四、组件的生命周期

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

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):组件判断是否重新渲染时调用

  下面是一个例子。

var Hello = React.createClass({getInitialState: function () {return {opacity: 1.0};},componentDidMount: function () {this.timer = setInterval(function () {var opacity = this.state.opacity;opacity -= .05;if (opacity < 0.1) {opacity = 1.0;}this.setState({opacity: opacity});}.bind(this), 100);},render: function () {return (<div style={{opacity: this.state.opacity}}>Hello {this.props.name}</div>);}
});ReactDOM.render(<Hello name="world"/>,document.body
);

  上面代码在hello组件加载以后,通过 componentDidMount方法设置一个定时器,每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。

  另外,组件的style属性的设置方式也值得注意,不能写成

style="opacity:{this.state.opacity};"

  而要写成

style={{opacity: this.state.opacity}}

  这是因为 React 组件样式是一个对象,所以第一重大括号表示这是 JavaScript 语法,第二重大括号表示样式对象。

 

五、Ajax

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

var UserGist = React.createClass({getInitialState: function() {return {username: '',lastGistUrl: ''};},componentDidMount: function() {$.get(this.props.source, function(result) {var lastGist = result[0];if (this.isMounted()) {this.setState({username: lastGist.owner.login,lastGistUrl: lastGist.html_url});}}.bind(this));},render: function() {return (<div>{this.state.username}'s last gist is<a href={this.state.lastGistUrl}>here</a>.</div>);}
});ReactDOM.render(<UserGist source="https://api.github.com/users/octocat/gists" />,document.body
);

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

转载于:https://www.cnblogs.com/lishuxue/p/6121775.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/542141.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c语言getchar函数_C语言中带有示例的getchar()函数

c语言getchar函数C语言中的getchar()函数 (getchar() function in C) The getchar() function is defined in the <stdio.h> header file. getchar()函数在<stdio.h>头文件中定义。 Prototype: 原型&#xff1a; int getchar(void);Parameters: FILE *filename(f…

python及pycharm

1.python简介&#xff1a; Python是一种计算机程序设计语言。是一种动态的、面向对象的脚本语言&#xff0c;最初被设计用于编写自动化脚本(shell)&#xff0c;随着版本的不断更新和语言新功能的添加&#xff0c;越来越多被用于独立的、大型项目的开发。 python最重要的功能&am…

anaconda如何更改环境配置_手把手教新手安装Anaconda配置开发环境

Anaconda是针对Python的集成环境&#xff0c;它已经成为全球数千万数据科学从业人员必备的开发工具&#xff0c;帮助人们有效地解决数据科学和机器学习相关地问题。如果你想从事数据科学和机器学习的工作&#xff0c;可以从本文开始&#xff0c;了解一下如何安装Anaconda。1. 初…

详解摘要认证

1. 什么是摘要认证摘要认证与基础认证的工作原理很相似&#xff0c;用户先发出一个没有认证证书的请求&#xff0c;Web服务器回复一个带有WWW-Authenticate头的响应&#xff0c;指明访问所请求的资源需要证书。但是和基础认证发送以Base 64编码的用户名和密码不同&#xff0c;在…

Python的基础知识

1.注释&#xff1a; #单行注释ctrl / 批量注释&#xff0c;选中需要注释的所有行ctrl / 批量取消注释&#xff0c;选中已经被注释的所有行 块注释&#xff1a;上下各三个双引号的部分全部被注释 “”“ hello haha ”“”2.变量&#xff1a; 变量命名的规则&#xff1a; …

树莓派该文件名_树莓派:文本编辑器与文件

GNU nano是Unix系统下一款常用的文本编辑器&#xff0c;以简单易用著称。与之相比&#xff0c;功能更强大的Vi和Emacs编辑器&#xff0c;学习曲线比nano陡峭很多。由于nano对于一般的文本编辑来说已经足够&#xff0c;所以我想简单介绍一下&#xff0c;以便于更好入门。基本使用…

Java SimpleTimeZone setStartYear()方法与示例

SimpleTimeZone类setStartYear()方法 (SimpleTimeZone Class setStartYear() method) setStartYear() method is available in java.util package. setStartYear()方法在java.util包中可用。 setStartYear() method is used to set the DST (Daylight Savings Time) starting y…

报表在IBM AIX系统下resin部署

&#xfeff;&#xfeff;报表是用java开发的&#xff0c;具有良好的跨平台性。不仅可以应用在windows、linux、操作系统&#xff0c;还可以应用在AIX等等的unix操作系统。在各种操作系统上部署过程有一些差别。下面说一下在AIX操作系统的部署的步骤。 1. 首先&#xff0c;下载…

python——if语句、逻辑运算符号

1.if条件判断语句&#xff1a; if 要判断的条件(True):条件成立的时候&#xff0c;要做的事情 elif 要判断的条件(True):.... elif 要判断的条件(True):.... else:条件不成立的时候要做的事情示例&#xff1a; 判断学生分数等级&#xff1a; 100——90&#xff08;包括90&…

sox处理mp3_使用SoX将mp3文件拆分为TIME秒

I need to split mp3 file into slices TIME sec each. Ive tried mp3splt, but it doesnt work for me if output is less than 1 minute.Is it possible do do with:sox file_in.mp3 file_out.mp3 trim START LENGTHWhen I dont know mp3 file LENGTH解决方案You can run SoX…

Java ObjectOutputStream writeInt()方法及示例

ObjectOutputStream类writeInt()方法 (ObjectOutputStream Class writeInt() method) writeInt() method is available in java.io package. writeInt()方法在java.io包中可用。 writeInt() method is used to write the given 4 bytes of an integer value. writeInt()方法用于…

移动端适配方案(上)

转载自:https://github.com/riskers/blog/issues/17 要搞懂移动端的适配问题&#xff0c;就要先搞明白像素和视口。 像素 在移动端给一个元素设置 width:200px 时发生了什么&#xff1f;这里的px到底是多长呢&#xff1f;像素是网页布局的基础&#xff0c;但是我们一直在用直觉…

python——rang函数、for、braek循环

rang函数&#xff1a; start: 计数从 start 开始。默认是从 0 开始。例如range&#xff08;5&#xff09;等价于range&#xff08;0&#xff0c; 5&#xff09;; stop: 计数到 stop 结束&#xff0c;但不包括 stop。例如&#xff1a;range&#xff08;0&#xff0c; 5&#xf…

Java文件类boolean isHidden()方法(带示例)

文件类boolean isHidden() (File Class boolean isHidden()) This method is available in package java.io.File.isHidden(). 软件包java.io.File.isHidden()中提供了此方法。 This method is used to check whether the file is hidden or not. 此方法用于检查文件是否隐藏。…

js导出的xlsx无法打开_js-xlsx 导出表格至excel

引入js文件下载地址&#xff1a;链接: https://pan.baidu.com/s/1gdOl1HnTrM5mZgPgd5qeDQ 提取码: c8js导入4个js文件js/xlsx.extendscript.js,js/xlsx.full.min.js,js/export.js,js/jszip.js,js/xlsx-style/xlsx.full.min.js其中 js/xlsx-style/xlsx.full.min.js 是表格样式的…

oracle sql 语句如何插入全年日期?

为什么80%的码农都做不了架构师&#xff1f;>>> oracle sql 语句如何插入全年日期&#xff1f; create table BSYEAR (d date); insert into BSYEAR select to_date(20030101,yyyymmdd)rownum-1 from all_objects where rownum < to_char(to_date(20031231,…

getparent_Java文件类字符串getParent()方法(带示例)

getparent文件类字符串getParent() (File Class String getParent()) This method is available in package java.io.File.getParent(). 软件包java.io.File.getParent()中提供了此方法。 This method is used to return the parent of the given file object(i.e In case of f…

python—while循环、字符串

1. while循环&#xff1a; while 条件满足&#xff1a;满足条件执行的语句 else:不满足条件执行的语句while 死循环 只要满足 while的条件永远为真&#xff0c;就会进入无限循环 while True:print(一直循环)while嵌套 \t &#xff1a;在控制台输出一个制表符&#xff0c;协助…

java基础——java基本运算

java基本运算 转载于:https://www.cnblogs.com/zhouj/p/6132535.html

【Java】MybatisPlus

MybatisPlus MybatisPlus是在mybatis基础上的一个增强型工具。它对mybatis的一些操作进行了简化&#xff0c;能够提高开发的效率。 springboot整合了mybatis之后&#xff0c;其实已经非常方便了&#xff0c;只需要导入mybatis的包后&#xff0c;在配置文件中编写数据源信息&a…