React-引领未来的用户界面开发框架-读书笔记(三)

第8章 DOM操作

多数情况下,React的虚拟DOM足以用来创建你想要的用户体验,而根本不需要直接操作底层真实的DOM。然而也有一些例外。最常见的场景包括:需要与一个没有使用React的第三方类库进行整合,或者执行一个React没有原生支持的操作。

访问受控的DOM节点

想要访问React控制的DOM节点,首先必须能够访问到负责这些DOM的组件。这可以通过为子组件添加一个ref属性来实现。

render () {return (<canvas ref="mainCanvas" />)
}

这样就可以通过this.refs.mainCanvas访问到<canvas组件。

⚠️必须保证赋给每个子组件的ref值在所有子组件中是唯一的;否则操作就会失效。

可以通过getDOMNode()方法访问到底层的DOM节点。

⚠️不可以在render方法中这样做。因为这时底层的DOM可能不是最新的(甚至尚未创建)

尽管refs和getDOMNode很强大,但请在没有其他的方法能够实现你需要的功能时再去选择它们。使用它们会成为React在性能优化上的障碍,并且增加应用的复杂性。

componentDidMount方法只会为每个DOM节点调用一次。

如果在componentDidMount方法内导致了DOM节点无法被移除,有可能导致内存泄漏或者其他的问题。如果你担心这一点,请在componentWillUnmount监听器,用于在组件的DOM节点移除时清理它自身。

第9章 表单

在React中,表单组件有两种类型:约束组件和无约束组件

无约束组件

给定一个HTML的<input/>一个值,它的值是可以改变的。这正是无约束组件名称的由来,因为表单组件的值是不受React控制的。

submitHandler = (event) => {event.preventDefault();var hellTo = this.refs.hellTo.getDOMNode().value;alert(hellTo)
}
render () {return (<form onSubmit={this.submitHandler}><input ref="hellTo" type="text" defaultValue="Hello World!" /><button type="submit">Speak</button></form>)
}

无约束组件可以用在基本的无需任何验证或者输入控制的表单中。

约束组件

约束组件,表单的状态交由React组件控制,状态值被存储在React组件的state中。

constructor(props) {super(props);this.state = {helloTo = 'Hello World!'}
}
handleChange = (event) => {this.setState({helloTo: event.target.value})
}
submitHandler = (event) => {event.preventDefault();alert(this.state.helloTo)
}
render () {return (<form onSubmit={this.submitHandler}><input ref="hellTo" type="text" onChange={this.handleChange} /><button type="submit">Speak</button></form>)
}

表单事件

React支持所有HTML事件。这些事件遵循驼峰命名的约定,且会被转成合成事件。

所有合成事件都提供了event.target来访问触发事件的DOM节点。

Label

由于for是JavaScript的保留字,所以我们无法把它作为一个对象的属性。

jsx

<label htmlFor="name">Name:</label>

javascript

React.DOM.label({htmlFor:"name", "Name"});

渲染后:

<label for="name">Name:</label>

文本框和Select

React对<textarea/><select/>的接口做了一些修改,提升了一致性,让它们操作起来更容易。

<textarea/>被改的更像<input/>了,允许我们设置value和defaulteValue。

//非约束的
<textareadefaultValue ="HelloWorld" />
//约束的
<textareavalue={this.state.helloTo } onChange ={this.handleChange} />//非约束的
<selectdefaultValue="8"><option value="A">First Option</option><option value="B">Second Option</option><option value= "C">Third Option</option>
</select>
//约束的
<selectvalue ={this.state.helloTo} onchange={this.handleChange}><option value="A">FirstOption </option><option value="B">Second Option </option><option value="C">Third Option</option>
</select>

React支持都选selce他,需要给value的defauletValue传递一个数组,如:defaultValue={["A","B"]}。

当使用可多选的select时,select组件的值在选项被选择时不会更新,只有选项的selected属性会发生变化。你可以使用ref或者syntheticEvent.target来访问选项,检查他们是否被选中。

下面的例子中,handleChange循环检查DOM,并过滤出哪些选项被选中了。

class Hello extends React.Component {constructor(props) {super(props);this.state = {option: ["B"]};}
    handleChange = (event) => {var checked = [];var sel = event.target;for (var i = 0; i < sel.length; i++){var option = sel.options[i];if (option.selected){checked.push(option.value);}}this.setState({option: checked});}
    submitHandler = (event) => {event.preventDefault();alert(this.state.options);}render () {return(<form onSubmit={this.submitHandler}><select multiple="true" value={this.state.options}onChange={this.handleChange}><option value="A">1</option><option value="B">2</option><option value="C">3</option></select><br /><button type="submit">speak</button></form>);}
}

复选框和单选框

复选框和单选框使用的则是完全不同的控制方式。

在HTML中,类似为checkbox或者radio的<input/>的行为完全不一样,通常,复选框或者单选框的值是不变的,只有checked的状态会变化,要控制复选框或者单选框,就要控制他们的checked属性,你要可以在非约束的复选框或者单选框中使用defaultChecked。

//非约束的
var MyForm = React.createClass({submitHandler: function(event){event.preventDefault();alert(this.refs.checked.getDOMNode().checked);},render: function(){return (<form onSubmit={this.submitHandler}><input ref="checked" type="checkbox" value="A" defaultChecked="true" /><br /><button type="submit">speak</button></form>);}
});//约束的
var MyForm = React.createClass({getInitialState: function(){return {checked: true};},handleChange: function(event){this.setState({checked: event.target.checked});},submitHandler: function(event){event.preventDefault();alert(this.state.checked);},render: function(){return (<form onSubmit={this.submitHandler}><input type="checkbox" value="A" checked={this.state.checked} onChange={this.handleChange} /><br/><button type="submit">speak</button></form>);}
});

在这两个例子中,<input/>的值一直都是A,只有checked的状态在变化。

表单元素的name属性

在React中,name属性对于表单元素来说并没有那么重要。因为约束表单组件已经把值存储到了state中,并且表单的提交事件也会被拦截。在获取表单值的时候,name属性并不是必需的。对于非约束的表单组件来说,也可以使用refs来直接访问表单元素。虽然如此,name仍然是表单组件中非常重要的一部分。

  • name属性可以让第三方表单序列化类库在React中正常工作。
  • 对于任然使用传统提交方式的表单来说,name属性是必需的。
  • 在用户的浏览器中,name被用在自动填写常用信息中,比如用户地址等。
  • 对于非约束的单选框组件来讲,name是有必要得,它可作为这些组件分组的依据。确保在同一时刻,同一表单中拥有同样name的单选框只有一个可以被选中。如果不使用name属性,这一行为可以使用约束的单选框实现。

多表单与change处理器

在使用约束的表单组件时,没有愿意重复地为每一个组件编写change处理器。可以在React中重用一个事件处理器。

可以有两种方式:通过.bind传递其他参数;使用DOMNode的name属性来判断需要更新哪个组件的状态。

示例可以看page75~77

除此之外,React还在addon中提供了一个mixin,React.addons.LinkedStateMixin,通过另一种方式解决同样的问题。

React.addons.LinkedStateMixin为组件提供了一个linkState方法。linkState返回一个对象,包含value和requestChange两个属性。

value根据提供的name属性从state中获取对应的值。

requestChange是一个函数,使用心得值更新同名的state。

mixins:[React.addons.LinkedStateMixin]

submitHandler = (event) => {event.preventDefault();alert(this.state.family_name);
}<input type="text" name="family_name" valueLink={this.linkState('family_name')} />

这种方法便于控制表单域,把其值保存在福组件的state中。而且,其数据流仍然与其他约束的表单元素保持一致。

但是,使用这种方式往数据流中添加定制功能时,复杂度会增加。我们建议只在特性的场景下使用。因为传统的约束表单组件提供了同样的功能而且更加灵活。

自定义表单组件

当编写自定义组件时,接口应当与其他表单组件保持一致。这可以帮助用户理解代码,明白如何使用自定义组件,且无须深入到组件的实现细节里。

示例:page79~82

Focus

React实现了autoFocus属性,因此在组件第一次被挂载时,如果没有其他的表单聚焦时React就会把焦点放到这个组件对应的表单域中,例如:

<input type="text" name="given_name"autoFocus="true" />

还有一种方法就是调用DOMNode的focus方法,手动设置表单域聚焦。

可用性

React虽然提高了开发者的生产力,但是也有不尽如人意的地方,使用React编写的组件常常缺乏可用性,例如表单提交无法通过键盘敲击回车键来实现,而这明明是HTML表单默认的提交方式。

要编写具有高可用性的好组件其实也不难,只是编写组件时需要花时间进行更多的思考。

  • 把要求传达清楚
  • 不断地反馈
  • 迅速响应
  • 符合用户的预期
  • 可访问
  • 减少用户的输入

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

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

相关文章

【专升本计算机】甘肃省普通高等学校专升本考试计算机全真模拟试卷(一)

甘肃省普通高等学校专升本考试计算机全真模拟试卷(一) 一、单项选择题(在每小题给出的四个选项中只有一项是正确的,将正确选项的字母序号填在括号内。每小题1分,共60分。) 1.在Excel中,当单元格中出现#N/A时,表示( )。 A.公式中有Excel不能识别的文本 B.公式或函数…

WPF 基础控件之 ToggleButton 样式

其他基础控件1.Window2.Button3.CheckBox4.ComboBox5.DataGrid 6.DatePicker7.Expander8.GroupBox9.ListBox10.ListView11.Menu12.PasswordBox13.TextBox14.RadioButtonToggleButton 实现下面的效果1&#xff09;ToggleButton来实现动画&#xff1b;Border嵌套 Ellipse并设置T…

hdu-5781 ATM Mechine(dp+概率期望)

题目链接&#xff1a; ATM Mechine Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Problem DescriptionAlice is going to take all her savings out of the ATM(Automatic Teller Machine). Alice forget how many deposit she has, …

Android之让手机能识别当前app为浏览器类型的APP

1 、问题 我们设置手机默认浏览器的时候&#xff0c;我们一般在“设置”页面&#xff0c;点击"默认应用管理“&#xff0c;然后再点击浏览器&#xff0c;发现里面没有当前的app,但是会有一些QQ浏览器(前提手机安装了)或者其它浏览器&#xff0c;我们怎么让系统能识别自己…

反射调用 java bean的set和get方法

v一、使用java.beans.PropertyDescriptor import java.beans.IntrospectionException; import java.beans.PropertyDescriptor; import java.lang.reflect.Field; import java.lang.reflect.Method;public class PropertyUtil {private static final String SET_PREFIX "…

八、后台与数据库(IVX 快速开发教程)

八、后台与数据库 在 iVX 中 数据库 作为数据存储仓库&#xff0c;通过 数据库 可以永久性存储存储数据&#xff0c;而 后台服务 起到数据传输作用&#xff0c;将 数据库 的数据传输到前台页面之中&#xff0c;页面再使用这些数据。 文章目录八、后台与数据库8.1.1 数据库添加…

React-引领未来的用户界面开发框架-读书笔记(四)

第10章 动画 动画可以让用户体验变得更加流畅自然&#xff0c;而React的TransitionGroup插件配合CSS3可以让我们在项目中整合动画效果的变得易如反掌。 通常情况下&#xff0c;浏览器中的动画都拥有一套极其命令式的API&#xff0c;你需要选择一个元素并主动移动它或者改变它的…

Android Studio开发环境搭建准备

Android Studio 是一个Android开发环境&#xff0c;基于IntelliJ IDEA. 类似 Eclipse ADT&#xff0c;Android Studio 提供了集成的 Android 开发工具用于开发和调试。 Android Studio开发环境搭建前&#xff0c;我们需要进行安装前的准备工作&#xff0c;本篇以在Windows 7平台…

管理中眼镜蛇效应

这个世界的事物经常会很奇怪。当你做了一个出发点很好的决定后&#xff0c;结果未必是向你预期的方向发展&#xff0c;甚至适得其反。作为企业/组织/团队的管理者&#xff0c;经常会在实际管理中&#xff0c;制定了错误的绩效激励办法&#xff0c;使得整体活动走向与初始激励目…

九、二手信息站点后台完成 (IVX 快速开发教程)

九、二手信息站点后台完成 了解完后台实现后&#xff0c;我们开始为该二手商品站点完成完成后台制作。 文章目录九、二手信息站点后台完成9.1.1 完成二手信息站点注册功能9.1.2 完成二手信息站点登录功能9.1.3 完成商品发布功能9.1.4 首页信息获取9.1.5 详情页内容9.1.1 完成二…

Android之自定义带圆角的水纹波效果

1 需求 自定义带圆角的水温波效果 2 代码实现 bg_navigation_ripple.xml <?xml version"1.0" encoding"utf-8"?> <ripple xmlns:android"http://schemas.android.com/apk/res/android"android:color"color/c3"><i…

爬虫是什么?起什么作用?

【爬虫】 如果把互联网比作一张大的蜘蛛网&#xff0c;数据便是放于蜘蛛网的各个节点&#xff0c;而爬虫就是一只小蜘蛛&#xff0c;沿着网络抓取自己得猎物&#xff08;数据&#xff09;。这种解释可能更容易理解&#xff0c;官网的&#xff0c;就是下面这个。 爬虫是一种自动…

根据实例类型反射操作数据库(简单通用表操作类)

这个类适用简单的表 1.有且只有id为主键&#xff0c; 2.并且实例类主键&#xff0c;也就是id应为字段&#xff0c;其他为属性 3.实例类名跟表名一样&#xff0c;字段属性跟列名一样 public class ProType{public int id;public string type{get;set;}public int array{get;set;…

React-引领未来的用户界面开发框架-读书笔记(五)

第11章 性能优化 Reactde Dom diff算法使我们能够在任意时间点高效地重新绘制整个用户界面&#xff0c;并保证最小程度的DOM改变&#xff0c;然而&#xff0c;也存在需要对组件进行细致优化的情况&#xff0c;这时就需要渲染一个新的DOM来让应用运行得更加高效。 shouldCompone…

oneproxy检测主从复制同步延迟

Q:为什么要实现读写分离延迟检测&#xff1f; A:就好比你在ATM机存钱&#xff0c;你老婆收到短信后乐呵呵的拿网银APP查看&#xff0c;结果钱没过来。其实钱已经到账了&#xff0c;只是查询的ATM机节点钱还没过来。所以我们dba要监控数据&#xff0c;一旦发现钱没有复制到另一A…

.NET 分表分库动态化处理

介绍本期主角:ShardingCore 一款ef-core下高性能、轻量级针对分表分库读写分离的解决方案&#xff0c;具有零依赖、零学习成本、零业务代码入侵我不是efcore怎么办这边肯定有小伙伴要问有没有不是efcore的,我这边很确信的和你讲有并且适应所有的ADO.NET包括sqlhelperShardingCo…

addEventListener 的事件函数的传递【转载】

addEventListener 参数如下&#xff1a; addEventListener(type, listener[, useCapture]); type&#xff0c;事件名称listener&#xff0c;事件处理器useCapture&#xff0c;是否捕获一直把 listener 记成是响应函数&#xff0c;function 类型。相信很多人也是这么理解的。多数…

Android之elevation实现阴影效果

1 需求 需要控件实现阴影效果 2 实现 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"andr…