挂载/卸载

//在类组件中
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
} componentDidMount() { //挂载
this.timerID = setInterval(
() => this.tick(),
1000
);
} componentWillUnmount() { // 卸载
clearInterval(this.timerID);
} tick() {
this.setState({
date: new Date()
});
} render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}

refs

当需要操作DOM节点时候,可以使用ref,但是,尽量避免至今操作DOM。使用refs场景有:

  • 处理focus、文本选择或者媒体播放
  • 触发强制动画
  • 集成第三方DOM库

使用方法:

ref 属性接受回调函数,并且当组件 装载(mounted) 或者 卸载(unmounted) 之后,回调函数会立即执行。

class CustomTextInput extends React.Component {//ref只能在类组件中使用
constructor(props) {
super(props);
this.focus = this.focus.bind(this);
} focus() {
// 通过使用原生API,显式地聚焦text输入框
this.textInput.focus(); //使用这个DOM引用方式。
} render() {
// 在实例中通过使用`ref`回调函数来存储text输入框的DOM元素引用(例如:this.textInput)
return (
<div>
<input
type="text"
ref={(input) => { this.textInput = input; }} /> //在挂载时候,执行该函数,该函数返回 input DOM引用。
<input
type="button"
value="Focus the text input"
onClick={this.focus}
/> </div>
);
}
}

受控组件与不受控组件

受控组件,用在表单元素中,数据保存在组件的state中,并只能通过setstate()来更新。state成为‘单一数据源原则’

不受控组件,不使用state,表单数据由DOM元素处理。可以使用ref来获得DOM引用。因为不受控组件的数据来源是 DOM 元素。例如:

class NameForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
} handleSubmit(event) {
alert('A name was submitted: ' + this.input.value);
event.preventDefault();
} render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={(input) => this.input = input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}

react学习(三)之生命周期/refs/受控组件 篇的更多相关文章

  1. Cocos Creator学习三:生命周期回调函数

    1.目的:学习生命周期回调函数以及回调顺序,更有利于我们逻辑的处理把控. 2.生命周期回调函数: 节点:指cc.Node:组件:指cc.Component. ①onLoad:脚本组件绑定的节点所在场景 ...

  2. Maven学习(三)生命周期

    maven有三套生命周期 1.clean       清理项目 2.default     构建项目 3.site           建立项目站点 每套生命周期都包含了一些阶段,这些阶段是有序的,后 ...

  3. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  4. Vue – 基础学习(1):对生命周期和钩子函的理解

    一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...

  5. 【React -- 4/100】 生命周期

    生命周期 概述 意义:组件的生命周期有助于理解组件的运行方式,完成更复杂的组件功能.分析组件错误原因等 组件的生命周期: 组件从被创建到挂载到页面中运行,再到组件不在时卸载的过程 生命周期的每个阶段总 ...

  6. react实战 系列 —— React 的数据流和生命周期

    其他章节请看: react实战 系列 数据流和生命周期 如何处理 React 中的数据,组件之间如何通信,数据在 React 中如何流动? 常用的 React 生命周期方法以及开源项目 spug 中使 ...

  7. Autofac学习之三种生命周期:InstancePerLifetimeScope、SingleInstance、InstancePerDependency

    InstancePerLifetimeScope:同一个Lifetime生成的对象是同一个实例 SingleInstance:单例模式,每次调用,都会使用同一个实例化的对象:每次都用同一个对象: In ...

  8. Autofac学习之三种生命周期:InstancePerLifetimeScope、SingleInstance、InstancePerDependency 【转载】

    InstancePerLifetimeScope:同一个Lifetime生成的对象是同一个实例 SingleInstance:单例模式,每次调用,都会使用同一个实例化的对象:每次都用同一个对象: In ...

  9. Spring Environment(三)生命周期

    Spring Environment(三)生命周期 Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) Spring Envi ...

随机推荐

  1. 利用python完成大学刷课(从0到完成的思路)

    i春秋作家:tllm 原文来自:利用python完成大学刷课(从0到完成的思路) 最近刚刚开学,学校总是有很多让人无语的课要修,还不能不修.然后我想写一个自动修课的脚本.大佬们不要笑我 是边面向百度学 ...

  2. 吴恩达机器学习笔记19-过拟合的问题(The Problem of Overfitting)

    到现在为止,我们已经学习了几种不同的学习算法,包括线性回归和逻辑回归,它们能够有效地解决许多问题,但是当将它们应用到某些特定的机器学习应用时,会遇到过拟合(over-fitting)的问题,可能会导致 ...

  3. 画线动画——SVG版和纯CSS版

    概述 我们常常在网站中看到一些画线的动画效果,非常炫酷,大多数这种画线动画效果是通过SVG实现的,也有不少是用纯css实现的,下面我总结了一下这2种方法,供以后开发时参考,相信对其他人也有用. 参考资 ...

  4. SVG之颜色、渐变和笔刷的使用

    一.颜色 我们之前使用英文来表示颜色并进行填充,比如: <circle cx="800" cy="120" r="110" strok ...

  5. python 字符串拼接

    str1 = 'abc' str2 = 'def' str3 = str1 + str2 print(str3) 这种方法只需要申请一次内存.

  6. odoo开发笔记 -- 模型字段定义中设置默认值

    例如: company_id = fields.Many2one('res.company', string='Company', default=lambda self: self.env['res ...

  7. 项目总结一:情感分类项目(emojify)

    一.Emojifier-V1 模型 1. 模型 (1)前向传播过程: (2)损失函数:计算the cross-entropy cost (3)反向传播过程:计算dW,db dz = a - Y_oh[ ...

  8. rest-framework之APIView 序列化组件

    rest-framework之APIView 一 安装djangorestframework 方式一:pip3 install djangorestframework 方式二:pycharm图形化界面 ...

  9. redis 系列3 数据结构之简单动态字符串 SDS

    一.  SDS概述 Redis 没有直接使用C语言传统的字符串表示,而是自己构建了一种名为简单动态字符串(simple dynamic string, SDS)的抽象类型,并将SDS用作Redis的默 ...

  10. Spring系列之IOC的原理及手动实现

    目录 Spring系列之IOC的原理及手动实现 Spring系列之DI的原理及手动实现 导语 Spring是一个分层的JavaSE/EE full-stack(一站式) 轻量级开源框架.也是几乎所有J ...