react-基础(2)
表单相关
固定的几个属性和事件
value: <input>,<textarea>;
checked: <input> typeof checkbox, radio;
selected: <option>;
onChange
: 作用于上面元素;
默认值
render: function() {
return <input type="text" defaultValue="Hello!" />;
}
获取事件触发
handleChange: function(event) {
this.setState({value: event.target.value.substr(0, 140)});
}
给select
定义默认值
//使用selected
<option value="A" selected={true}>Apple</option>
//利用state
var Select = React.createClass({
getInitialState: function() {
return {
value: 'B'
}
},
change: function(event){
this.setState({value: event.target.value});
},
render: function() {
return (
<select onChange={this.change} value={this.state.value} >
<option value="A" >Apple</option>
<option value="B">Banana</option>
<option value="C">Cranberry</option>
</select>
);
}
});
设置select
多选
<select multiple={true} value={['B', 'C']}>
</select>
组件的生命周期
三个状态
Mounting
:已插入真实DOM
;
componentWillMount()
: -React.render
- 在
render
方法执行之前,此时不能获取dom
节点;
- 在
getInitialState();
-React.render
render
:-React.render
- 组件初始化渲染和
this.setState({}), this.render(), React.render
时会调用; - 在修改dom节点的时候也不会调用;
- 注意在执行
this.setState()
时才会重新渲染;
- 组件初始化渲染和
componentDidMount();
-React.render
Updating
:正在被重新渲染;
componentWillReceiveProps(object nextProps)
:-this.setProps
shouldComponentUpdate(object nextProps, object nextState)
:-this.setProps, this.setState
- 组件判断是否重新渲染时调用;
- 如果有定义,必须返回布尔值以判断时候继续调用
update
方法;
componentWillUpdate(object nextProps, object nextState)
:-(this.setProps, this.setState && should !== false) || this. forceUpdate
componentDidUpdate(object prevProps, object prevState)
:-(this.setProps, this.setState && should !== false) || this. forceUpdate
Unmounting
:已移出真实DOM
;
componentWillUnmount();
-React.unmountComponentAtNode
//移除其他组件
mount: function () {
React.render(<Input />, document.getElementById('app'));
},
unmout: function () {
React.unmountComponentAtNode(document.getElementById('app'));
}
//移除自身
remove: function () {
React.unmountComponentAtNode(React.findDOMNode(this).parentNode);
}
强制重新渲染: this.forceUpdate()
混合
- 使用
Mixins;
var SetIntervalMixin = {
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.map(clearInterval);
}
};
var TickTock = React.createClass({
mixins: [SetIntervalMixin],
.......
}
- 在使用
es6
时,不支持mixins
;
Contexts
react-基础(2)的更多相关文章
- react基础(1)
在 react入门系列 里面,介绍了一些react的基础知识,在react基础部分,会结合手脚架工具进行更多的总结. 关于webpack我在这里就不讲解了,有需要的小伙伴可以自己去百度一下学习资料,我 ...
- react基础(2)
react基础(1):介绍了如何创建项目,总结了JSX.组件.样式.事件.state.props.refs.map循环,另外还讲了mock数据和ajax 还是用 react基础1 里创建的项目继续写案 ...
- react基础语法(五) state和props区别和使用
props的验证: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- react基础用法二(组件渲染)
react基础用法二(组件渲染) 如图所示组件可以是函数 格式:function 方法名(){ return <标签>内容</标签>} 渲染格式: <方法名 /> ...
- react基础用法一(在标签中渲染元素)
react基础用法一(渲染元素) 如图所示最简单的变量使用方法 格式 let 变量名称 = 赋值: 渲染格式直接用 {变量名称} 就可以直接渲染到页面 如图所示第二种渲染方法 格式 const 变量名 ...
- AntDesign(React)学习-3 React基础
前面项目已经建起来了,但是没有React基础怎么办,从头学习,这个项目使用的是基于React16.X版本的几种技术集成,那么我们就从网上找一些相关的资料进行研究,我的习惯是用到哪学到哪. 一.先看一些 ...
- React 基础入门,基础知识介绍
React不管在demo渲染还是UI上,都是十分方便,本人菜鸟试试学习一下,结合阮一峰老师的文章,写下一点关于自己的学习react的学习笔记,有地方不对的地方,希望各位大牛评论指出: PS:代码包下载 ...
- React基础语法学习
React主要有如下3个特点: 作为UI(Just the UI) 虚拟DOM(Virtual DOM):这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法 ...
- React 基础入门
React 起源于 Facebook 内部项目,是一个用来构建用户界面的 Javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组 ...
- react基础
上一篇文章主要是记录了自己是如何创建react项目的,今天则主要是总结一下react中的一个基础入门知识,包括数据定义和绑定.属性绑定.数组循环等等. 组件继承和挂载 当我们使用脚手架或者命令行创建一 ...
随机推荐
- HTML 基础
1.HTML 超文本标记语言 2.网页分类: 动态网页 静态网页 ①静态网页与动态网页区别: 主要:动态网页与数据库链接,静态网页不与数据库连接: ②静态网页 修改展示图片 必须修改源代码 : ...
- 最喜欢的VS 键盘快捷键摘抄
最喜欢的Visual Studio键盘快捷键(关闭) 336年最喜欢的 425年 你最喜欢的Visual Studio键盘快捷键是什么? 我总是让我的手在键盘上,远离鼠标! 一个请每回答. net ...
- HDU 5821 Ball (贪心排序) -2016杭电多校联合第8场
题目:传送门. 题意:T组数据,每组给定一个n一个m,在给定两个长度为n的数组a和b,再给定m次操作,每次给定l和r,每次可以把[l,r]的数进行任意调换位置,问能否在转换后使得a数组变成b数组. 题 ...
- HTML 表格垂直对齐方式
HTML表格标记教程(25):行的垂直对齐属性VALIGN在垂直方向上,可以设定行的对齐方式,分别有居上.居中.居下3种.基本语法<TR VALIGN="TOP">&l ...
- ios 多线程小结----- GCD篇
//3 GCD(充分利用设备的多盒)-------------屏蔽了线程,只能看见任务 队列步骤两步,定制任务,将任务添加到队列.GCD将添加的任务,放到线程中去执行,自动执行,自动释放原则:先进先出 ...
- iOS真机调试
备注:本阶段之前的修改配置文件.准备脚本等,只需要做一次.但本阶段的操作,对每个需要真机调试的工程都要做一遍. ① 禁用Xcode自动的签名操作 将工程配置“Build Settings”中所有的Co ...
- [插件]jQuery multiselect初始化及默认值修改
下载地址:http://pan.baidu.com/s/1dE2daSD 1.Jquery多选下拉列表插件jquery multiselect功能介绍及使用 http://www.jb51.net/a ...
- 玩转SSRS第九篇---匿名访问的一个间接方法
SSRS是一个功能丰富的报表平台,我们可以在这个平台上实现各种不同需求的报表应用,所以这个平台也吸引了很多.net框架之外的技术,希望能在应用中引入SSRS的报表,比如JSP或者PHP页面,这个时候系 ...
- jQuery实现无限加载瀑布流特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 通过Small Basic把儿子/女儿带入编程的世界
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:今天是儿子3岁的生日,就来介绍一下适合给儿童培养兴趣的编程语言--微软Small Ba ...